Aliasing react as preact throws Cannot find module: 'react/jsx-runtime'

Question

Dont use the guide I linked, it is old- use the one in the answer instead

I am attempting to switch from react to preact by following their guide. I change webpack.config.js alias to add:

  alias: {
    "react": "preact-compat",
    "react-dom": "preact-compat",
    .....

However when I run npm run build I keep getting:

Failed to compile.

.\src\index.tsx
Cannot find module: 'react/jsx-runtime'. Make sure this package is installed.

I have tried:

changing the tsconfig as suggested here: create-react-app typescript won't run npm start. Didnt seem to help. I eventually left it as the original: "jsx": "react-jsx"
confirming my dependencies are the latest ones:

"@types/node": "^14.14.35",

"@types/react": "^17.0.3",

"@types/react-dom": "^17.0.3",

"typescript": "^4.2.3",
removing and reinstalling node_modules
converting index.js to index.tsx
adding preact exports to package.json like this github suggested: https://github.com/babel/babel/issues/12210#issuecomment-712043796

When I comment out the alias changes in the preact guide everything works fine. Happy to include more info, I'm not sure whats relevant however.

Heres the verbose error log from npm run build:

13 verbose stack Error: website@0.2.5 build: `node scripts/build.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)

score 3 · Accepted Answer · answered Apr 06 '21 at 06:07

3

It looks like you were referring to a dated documentation page. Here is the latest one.

Your should use preact/compat instead:

alias: {
  "react": "preact/compat",
  "react-dom": "preact/compat",
  ...

answered Apr 06 '21 at 06:07

Janez Kuhar

3,705
4
22
45

2

Just to add, `preact-compat` is our legacy compat package, only for v8. v10 we switched to including this in the main library itself specifically so users don't need to go looking for others. – rschristian Apr 07 '21 at 21:50
The documentation now mentions a third entry: `"react/jsx-runtime": "preact/jsx-runtime"` – Matthias Jun 20 '22 at 21:54
This worked on preact 10 for me, I only changed "-" to "/" (ex.: preact-compat to preact/compat). – Ëuclïdës Ďŕÿ'C Mar 02 '23 at 14:45

Aliasing react as preact throws Cannot find module: 'react/jsx-runtime'

1 Answers1