NextJS Still Requires React with Preact compatibility Plugin
See original GitHub issueBug report
For my example project, I am unable to build and run unless I include react and react-dom in my dependencies, even if the build and server doesn’t actually use react.
[kenny@kenny-pc first-preact-app]$ yarn build
yarn run v1.16.0
$ next build
The module 'react' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react-dom'
internal/modules/cjs/loader.js:670
throw err;
^
Error: Cannot find module 'react'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
at Function.Module._load (internal/modules/cjs/loader.js:591:27)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object.<anonymous> (/home/kenny/first-preact-app/node_modules/next/dist/bin/next:25:15)
at Module._compile (internal/modules/cjs/loader.js:816:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
at Module.load (internal/modules/cjs/loader.js:685:32)
at Function.Module._load (internal/modules/cjs/loader.js:620:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Describe the bug
The final build/server doesn’t use react react-dom, but is needed for the build in or else the errors appear. A clear and concise description of what the bug is.
To Reproduce
Clone first preact app, remove react and react-dom as dependencies, and then build.
Expected behavior
The build should work as the module aliases state that preact/compat should be aliased for react and react-dom.
System information
- Manjaro 18.04
Issue Analytics
- State:
- Created 4 years ago
- Reactions:13
- Comments:9 (2 by maintainers)
Top Results From Across the Web
Use Preact in Next.js 13 - DEV Community
Preact is highly compatible with React API and supports the same ECMA Script ... we need to swap React with Preact in our...
Read more >Switching to Preact (from React)
While Preact strives to be API-compatible with React, portions of the interface are intentionally not included. The most noteworthy of these is createClass()...
Read more >Preact vs React: A lightweight alternative (Next.js included)
The key lies in the preact/compat, the compatibility layer. The only single-step required is "aliasing". In "aliasing", we tell our bundler that ...
Read more >How To Switch Your Next.js App to Preact Effortlessly
Switching to Preact has helped me several times. However, Preact is not a 100% replacement for React. Since both libraries are constantly ...
Read more >Make Your NextJS Site Even Faster By Replacing React With ...
Then, we need to configure NextJS to use Preact for the production build. ... supported by Preact yet, you can take a look...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

The preact example was updated by Jason Miller: https://github.com/zeit/next.js/tree/canary/examples/using-preact
I haven’t had time to work on this and unfortunately I’m not well versed enough in the internal working of nextJS to be able to diagnose the issue. Hoping a contributor can hop on this.