I am building my React App and suddenly I get the following error:

Error: Minified React error #321; visit .html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Now my APP only show that green circle button located in App.js, the rest of the website build in React shows nothing (white page).

This happened right after updating the code when I tried to upload some .mp4 videos to the server. I visited the .html/?invariant=321 for the full message detail and check the 3 possible causes:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I verified each of those 3 causes, and appears to be fine.

Have you deal with something similar before? How you solved it? Do you have an idea how to debug the error?

I appreciate any help, and if you need more detail about the code or the problem, please ask.

I am building my React App and suddenly I get the following error:

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

Now my APP only show that green circle button located in App.js, the rest of the website build in React shows nothing (white page).

This happened right after updating the code when I tried to upload some .mp4 videos to the server. I visited the https://reactjs/docs/error-decoder.html/?invariant=321 for the full message detail and check the 3 possible causes:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I verified each of those 3 causes, and appears to be fine.

Have you deal with something similar before? How you solved it? Do you have an idea how to debug the error?

I appreciate any help, and if you need more detail about the code or the problem, please ask.

• javascript
• html
• reactjs
• docker
• react-hooks

• look for error on dev build. It will provide a better stack trace to help debug the issue – Punit Makwana Commented Dec 2, 2020 at 14:03
• @PunitMakwana For some reason, on development side does not display the error and the app runs well. Only appears on production – maxrojas Commented Dec 2, 2020 at 14:56
• Do you have a working example? Otherwise it’s hard to say anything – tmhao2005 Commented Dec 2, 2020 at 15:36
• @tmhao2005 Take a look to this codesanbox, it is a close replication of the error – maxrojas Commented Dec 2, 2020 at 17:34

3 Answers 3

I also faced this issue. This was happening because of loom extension. I disabled loom and the error gone.

Problem

The thing is your library being used sample-testing which has been built in a very weird way, specially TButton ponent which has included React v16.8.6 inside the module but it uses monjs style like this:

module.exports = {}

// React has been included here which is very wrong way
/** @license React v16.8.6
 * react.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var r=n(4)
// ...

Solution

In case of writing a library to export React ponent, you just simply build them as separate files with monjs style. Do not include React like above which is supposed to be included in the parent app which uses your library.

Your built ponent would much look like this:

TButton.js

const TButton = (props) => {
  // ...
}

exports.default = TButton;

After a lot of debugging, I discover that the problem was caused by certain functions of the library mdbreact

// package.json

"dependencies": {
   ...
   "mdbreact": "git+https://oauth2:[email protected]/mdb/react/re-pro.git"
   ...
}

I have got the pro version of the library, and by default, it updates automatically. I was using the 4.27.0 version and all work just fine, then when they update the library to the new 5.0.0 versión and my app explode. It was hard to debug because only happened over production side.

I solve this downgrading the library to 4.27.0 version just adding #4.27.0 at the end of the dependency

// package.json

"dependencies": {
   ...
   "mdbreact": "git+https://oauth2:[email protected]/mdb/react/re-pro.git#4.27.0"
   ...
}

I'm going to keep this version until they mit a fix of these certain functions. Thanks to @tmhhao2005 who gave me guidelines to research. Hope it helps someone else with a similar error!