next.js: Error: Cannot find module 'react-is' - Production build

In case anyone is interested, here is a docker-compose.yml file that reproduces the issue:

version: '3'

services:
  app:
    image: node:16-slim
    ports:
      - '8080:8080/tcp'
    environment:
      NODE_ENV: $NODE_ENV
    command: >-
      bash -c '
        npx create-next-app@latest app --use-npm --with-static-export
        cd app

        # Static export does not work out of the box due to the Image component
        grep -v Image pages/index.js >pages/index.js2 && mv pages/index.js2 pages/index.js

        npx next build
        npx next export

        npx http-server --proxy http://localhost:8080/index.html? out
      '

Drop that in a directory by itself, then run docker-compose up. Open http://127.0.0.1:8080 in your browser and check the console logs after a refresh. There should be no errors.

Hit CTRL+C to stop the container. Next, run NODE_ENV=development docker-compose up. Reloading the page should now show the error in the console.

It would be great if next export could detect this problem and warn the user. It would save a lot of time and frustration tracking this down.

Happened to me as well 😂

Make sure NODE_ENV=production while next build instead of NODE_ENV=development.

I managed to resolve the issue that was throwing this error in my project. Documenting here in case it’s useful to anyone following this issue.

The react-is package was moved from “dependencies” to “devDependencies” in Next’s package.json as part of a change published in 12.0.9: https://github.com/vercel/next.js/pull/32742/commits/70822edcdb9b3a281d573ed6fadffa0c4e2b3c4b

My Docker image only contains production dependencies to ensure it’s as small as possible. I use the yarn --production command in my Dockerfile to ensure devDependencies aren’t installed.

Since react-is is a peerDependency of at least one of the packages I use (styled-components) I needed to ensure react-is is still available to my application after upgrading to Next 12.0.9. Adding this package to the “dependencies” section of my package.json file resolved the issue.

This problem is back in release 12.0.9

NODE_ENV must not be set to development while building the app with next build, probably you would have to clear your .next directory too.

For self-hosting, we recommend the official outputStandalone mode as it can result in an 80% smaller image size in docker deployments:

https://nextjs.org/blog/next-12-1#self-hosted-nextjs-improvements

I managed to resolve the issue that was throwing this error in my project. Documenting here in case it’s useful to anyone following this issue.

The react-is package was moved from “dependencies” to “devDependencies” in Next’s package.json as part of a change published in 12.0.9: 70822ed

My Docker image only contains production dependencies to ensure it’s as small as possible. I use the yarn --production command in my Dockerfile to ensure devDependencies aren’t installed.

Since react-is is a peerDependency of at least one of the packages I use (styled-components) I needed to ensure react-is is still available to my application after upgrading to Next 12.0.9. Adding this package to the “dependencies” section of my package.json file resolved the issue.

Thanks this resolved the deployment error I was getting in Vercel

This has been released in 12.0.4

Hi, this has been updated in v12.0.4-canary.10, please update and give it a try!

Yes @neodon the screenshot in the original post is from the browser’s console.

When building with Docker I don’t encounter this error, nor with Vercel. We’ve had people with various OSs and Node versions report this issue. So far in this post we’ve had:

• macOS M1 Big Sur
• Windows 10
• Ubuntu 21.10
• Node 16
• Node 17
• Node 14

Would be interesting to know if @rokoroku is using an M1 as well.

No, I’m not.

Same issue here: I found below codes from production chunk:

// weird
.next/serverless/chunks/726.js:        const { isValidElementType  } = __webpack_require__(Object(function webpackMissingModule() { var e = new Error("Cannot find module 'react-is'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));

// valid code for missing module
.next/serverless/chunks/730.js:                Object(function webpackMissingModule() { var e = new Error("Cannot find module 'undefined'"); e.code = 'MODULE_NOT_FOUND'; throw e; }());

Node v14.18.1 Nextjs v12.0.2

I just tried creating a fresh new Next project, building and running, and I get the same error! 👀

Steps to reproduce

1. yarn create next-app
2. yarn build
3. yarn run
4. Check the browser’s console