1

I keep having this issue that Solid.js says "React is not defined" when the package being used dosent rely on React? I had the issue with Solid-spinner and solid-query.

Uncaught (in promise) ReferenceError: React is not defined
    at TailSpin (TailSpin.jsx:4:5)
    at dev.js:528:12
    at untrack (dev.js:428:12)
    at Object.fn (dev.js:524:37)
    at runComputation (dev.js:709:22)
    at updateComputation (dev.js:692:3)
    at devComponent (dev.js:534:3)
    at createComponent (dev.js:1265:10)
    at get children [as children] (CheckoutModal.jsx:67:2)
    at Show.createMemo.name [as fn] (dev.js:1461:27)

I have tried uninstalling the package and installing it again but it didnt help.

Ole Dybedokken
  • 343
  • 2
  • 15

1 Answers1

0

Since both Solid and React uses JSX to describe the UI layer you can not use both of them at the same time without a workaround because you can use only one of them in your JSX transpiler configuration.

That being said, if your aim is using Solid but receiving that error, it means you have misconfigured your development environment.

If you are using vite, make sure you have installed vite-plugin-solid and added to the plugins in your vite.config.ts:

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin],
});

If you are not using vite then you need make sure babel installed and properly configured to transform jsx using babel-preset-solid:

npm install solid-js babel-preset-solid

Then add babel-preset-solid to your .babelrc, or to your Babel config in webpack or rollup:

"presets": ["solid"]

For TypeScript, set your tsconfig.json to handle Solid's JSX as follows (see the TypeScript guide for more details):

"compilerOptions": {
  "jsx": "preserve",
  "jsxImportSource": "solid-js",
}

And in your typescript config, add these lines under compilerOptions:

"jsx": "preserve",
"jsxImportSource": "solid-js",

You can check out the getting started section for more: https://www.solidjs.com/guides/getting-started

snnsnn
  • 10,486
  • 4
  • 39
  • 44
  • 'import { defineConfig } from 'vite'; import solidPlugin from 'vite-plugin-solid'; export default defineConfig({ plugins: [solidPlugin()], build: { target: 'esnext', polyfillDynamicImport: false, } });' This is what I have. I am using vite you are correct. However I still get React error – Ole Dybedokken Jul 13 '23 at 21:54
  • It could be typescript configuration then, I forgot to mention but updated the answer. If that does not fix, make sure you don't overwrite default babel config. – snnsnn Jul 13 '23 at 21:58
  • Do I need a tsconfig.json even if I am using vite? – Ole Dybedokken Jul 13 '23 at 22:02
  • Default solid template comes with tsconfig, also as far as I know vite needs one too. If you are using the older versions, try updating solid and related libs to latest versions. – snnsnn Jul 13 '23 at 22:06
  • Maybe those libraries are misconfigured. Try running a simple app w/o any additional library. – snnsnn Jul 13 '23 at 22:20