Cannot run React alongside SolidJS in Astro

The Error:

[vite] The requested module 'solid-js/jsx-dev-runtime' does not provide an export named 'jsxDEV'

[vite] The requested module 'solid-js/jsx-dev-runtime' does not provide an export named 'jsxDEV'

My Astro Config:

...
import react from "@astrojs/react";
import solid from "@astrojs/solid-js";
...

// https://astro.build/config
export default defineConfig({
  ...
  integrations: [
    solid({
      include: ["**/solid/*"],
    }),
    react({
      exclude: ["**/solid/*"],
    })
    ...
});

...
import react from "@astrojs/react";
import solid from "@astrojs/solid-js";
...

// https://astro.build/config
export default defineConfig({
  ...
  integrations: [
    solid({
      include: ["**/solid/*"],
    }),
    react({
      exclude: ["**/solid/*"],
    })
    ...
});

I don't believe it's an issue with my component. I'm trying to compile anything inside a "solid" directory (any of the parent directories that match that) with SolidJS, and everything else with react

4 Replies

lili/lilithOP•7d ago

Also yes I would rather run purely solidJS but my website is based on a template that has written a ton of code in React already, and I don't want to rewrite everything. see also for info on using multiple JSX frameworks: https://docs.astro.build/en/guides/integrations-guide/react/#combining-multiple-jsx-frameworks Update I believe to have tracked it down to this line in my tsconfig.json:

    "jsxImportSource": "react"

    "jsxImportSource": "react"

I'm still stuck because I don't know how or if it's possible to make typescript work with solidjs and react together. Can anyone help me figure out how to fix this?

Madaxen86•7d ago

Try to add this a the top of your solidjs files: /** @jsxImportSource solid-js */ https://docs.solidjs.com/configuration/typescript#configuring-typescript

lili/lilithOP•5d ago

I'm still getting mostly the same error:

[astro-island] Error hydrating /src/layouts/functional-components/product/ProductGallery.tsx SyntaxError: The requested module 'http://localhost:4321/node_modules/.vite/deps/solid-js_jsx-dev-runtime.js?v=6cc3ef8f' doesn't provide an export named: 'jsxDEV'

[astro-island] Error hydrating /src/layouts/functional-components/product/ProductGallery.tsx SyntaxError: The requested module 'http://localhost:4321/node_modules/.vite/deps/solid-js_jsx-dev-runtime.js?v=6cc3ef8f' doesn't provide an export named: 'jsxDEV'

Madaxen86•5d ago

Here's a minimal Astro setup. Check especially 1. tsconfig.ts

"compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "react"
  }

"compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "react"
  }

2. astro.config.mjs 3. upgrade to latest versions of packages after project setup (in my case pnpm upgrade) Note: I didn't even need the /** @jsxImportSource solid-js */ because probably astro adds this though its config. https://github.com/madaxen86/astro-solid-react

GitHub

GitHub - madaxen86/astro-solid-react

Contribute to madaxen86/astro-solid-react development by creating an account on GitHub.

Gaming

Programming

Cannot run React alongside SolidJS in Astro

Did you find this page helpful?