Next.js 'Error occurred prerendering page "/": Error: Minified React error #321;' during production build

Question

I am trying to run Next.js on firebase functions, and have successfully deployed before. However, after adding a webpack plugin (svgr) and making further customisations I am running into an error whilst building. It is occurring after a successful compile when Next.js is automatically optimizing pages.

The dependencies for both my functions folder and my dev folder are the exact same, except the functions folder has two extras (for firebase).

Upon inspection, it seems to think I have multiple React instances. Running the app in dev mode out of my /app folder works fine, however, running the app out of the /functions folder in dev mode still does not work.

Error occurred prerendering page "/": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Error occurred prerendering page "/404.html": Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

next.config.js

module.exports = {
    distDir: "../functions/next",
    webpack(config) {
        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        });
        return config;
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        }
    },

};

app/package.json

  "dependencies": {
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "@svgr/webpack": "^4.3.3",
    "clsx": "^1.0.4",
    "next": "^9.1.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },

functions/package.json

  "engines": {
    "node": "8"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "clsx": "^1.0.4",
    "next": "^9.1.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "@svgr/webpack": "^4.3.3"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.1.6"
  },

it seems reasonable to get rid of ^ in dependencies to make sure it does not get updated with the next build or goes out of sync. — Evgeny Timoshenko
– Evgeny Timoshenko, Commented Dec 3, 2019 at 13:17

Gian Febrian · Accepted Answer · 2020-02-28 07:32:36Z

0

Let's leave distDir as is, say to .next instead of ../functions/.next. In a way, You can copy build artifact right after the build using cp .next ../functions/.next. You also need to change dev value to true when you call next({ dev: true, ...otherOptions }) or set NODE_ENV=production to run firebase serve.

answered Feb 28, 2020 at 7:32

Gian Febrian

91 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js 'Error occurred prerendering page "/": Error: Minified React error #321;' during production build

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related