Hard dealing with Error: Minified React error #321 - ReactJS

Question

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

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.

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.org/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.

Ellerey

look for error on dev build. It will provide a better stack trace to help debug the issue – Pentagram

@PunitMakwana For some reason, on development side does not display the error and the app runs well. Only appears on production – Ellerey

Do you have a working example? Otherwise it’s hard to say anything – Chil

@Chil Take a look to this codesanbox, it is a close replication of the error – Ellerey

Answer 1

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 commit a fix of these certain functions. Thanks to @tmhhao2005 who gave me guidelines to research. Hope it helps someone else with a similar error!

Ellerey

Answer 2

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

Cuneiform

That was so silly haha. The error is gone once I disabled loom :D – Peay

Same here, I spent an hour trying to find why I have this error in my Vue project – Mirianmirielle

Answer 3

Problem

The thing is your library being used sample-testing which has been built in a very weird way, specially TButton component which has included React v16.8.6 inside the module but it uses commonjs 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 component, you just simply build them as separate files with commonjs style. Do not include React like above which is supposed to be included in the parent app which uses your library.

Your built component would much look like this:

TButton.js

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

exports.default = TButton;

Chil

Thank you @tmhao2005. You helped me to debug in the correct way. It was a problem with mdbreact library, surely they develop some new feature incompatible with my app. I explained it in the post. – Ellerey