S
SolidJSā€¢8mo ago
Benno

SolidJS renderToString with Hono: Undefined or 'React not defined' error

Hi everyone, I'm trying to use SolidJS's renderToString function within a Hono server to generate SVG components, but I'm running into issues. The renderToString call always returns undefined, or I get a "React is not defined" error (if I change tsconfig.json to "jsxImportSource": "solid-js"). Has anyone successfully integrated SolidJS's JSX rendering with Hono or has ideas how to do so? If so, could you share how you resolved the JSX compilation for SolidJS? Thanks šŸ™‚ Here's a snippet of my code for context: 
openApiRouter.get('/energy-class/arrow.svg', {
  queryValidator: vValidator(
    v.object({
      energyClass: v.picklist(ENERGY_CLASSES),
      variant: v.optional(v.picklist(['SM', 'LG'])),
      size: v.optional(v.number())
    })
  ),
  handler: (c) => {
    const { energyClass, size = 56, variant = 'SM' } = c.req.valid('query');

    let svgString;
    switch (variant) {
      case 'SM':
        svgString = renderToString(
          () => <EfficiencyArrowSm energyClass={energyClass} size={size} />
        );
        break;
      case 'LG':
        svgString = renderToString(
          () => <EfficiencyArrowLg energyClass={energyClass} size={size} />
        );
        break;
    }

    console.log({ svgString }); // Either undefined or "React is not defined" error

    return c.text(svgString, 200, {
      'Content-Type': 'image/svg+xml;charset=utf-8'
    });
  }
});
openApiRouter.get('/energy-class/arrow.svg', {
  queryValidator: vValidator(
    v.object({
      energyClass: v.picklist(ENERGY_CLASSES),
      variant: v.optional(v.picklist(['SM', 'LG'])),
      size: v.optional(v.number())
    })
  ),
  handler: (c) => {
    const { energyClass, size = 56, variant = 'SM' } = c.req.valid('query');

    let svgString;
    switch (variant) {
      case 'SM':
        svgString = renderToString(
          () => <EfficiencyArrowSm energyClass={energyClass} size={size} />
        );
        break;
      case 'LG':
        svgString = renderToString(
          () => <EfficiencyArrowLg energyClass={energyClass} size={size} />
        );
        break;
    }

    console.log({ svgString }); // Either undefined or "React is not defined" error

    return c.text(svgString, 200, {
      'Content-Type': 'image/svg+xml;charset=utf-8'
    });
  }
});
1 Reply
MaveriX89
MaveriX89ā€¢7d ago
I have this same exact problem except Iā€™m using Elysia in my case. Were you able to resolve this?

Did you find this page helpful?