question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NextJS Still Requires React with Preact compatibility Plugin

See original GitHub issue

Bug 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:closed
  • Created 4 years ago
  • Reactions:13
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
timneutkenscommented, May 1, 2020

The preact example was updated by Jason Miller: https://github.com/zeit/next.js/tree/canary/examples/using-preact

1reaction
kenk2commented, Sep 1, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found