Benno Posts - Answer Overflow

Benno

Explore posts from servers

•Created by Benno on 9/17/2024 in #support

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 replies

Gaming

Programming