Next.js: NextJS Still Requires React with Preact compatibility Plugin

[kennykimjr]

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

[ghost]

Any updates? I'm having the same issue.

[kennykimjr]

No updates to this so far.

[siddharth-joshi-e2156]

Any updates? I'm facing the same issue too

[kennykimjr]

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.

[jwarkentin]

Just ran into this same issue yesterday. The problem is the command line tool tries to resolve react and react-dom right away when it starts and the module alias for preact doesn't register until it gets to the application entrypoint. My workaround for right now is using the link-module-alias module to create symlinks with the following in my package.json:

{
  "scripts": {
    "postinstall": "link-module-alias"
  },
  ...,
  "_moduleAliases": {
    "react": "node_modules/preact/compat",
    "react-dom": "node_modules/preact/compat"
  }
}

[kennykimjr]

@jwarkentin Unless I'm doing something wrong, this still would require you to specify this in your root project package.json instead of being able to abstract this in another package's package.json. Is there possibly a way to be able to abstract the necessity of importing link-module-alias in your main project's package.json?

When I tried to do that via an npm package installed onto my root project, the link-module-alias command did not run.

EDIT: It seems that it could indeed work with NPM, but not yarn due to yarn not being able to run postinstalls of installed packages. It's an issue that's been occuring as recently as June of this year: https://github.com/yarnpkg/yarn/issues/5476

[jwarkentin]

Sounds about right. There was a time when I preferred yarn because npm was shit but npm got its act together and yarn started pissing me off a lot so I switched back to npm and have been happy ever since.

[timneutkens]

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