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:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
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.

look for error on dev build. It will provide a better stack trace to help debug the issue — Punit Makwana
– 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
– maxrojas, Commented Dec 2, 2020 at 14:56
Do you have a working example? Otherwise it’s hard to say anything — tmhao2005
– tmhao2005, Commented Dec 2, 2020 at 15:36
@tmhao2005 Take a look to this codesanbox, it is a close replication of the error — maxrojas
– maxrojas, Commented Dec 2, 2020 at 17:34

Millat · Accepted Answer · 2023-03-01 18:32:26Z

7

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

answered Mar 1, 2023 at 18:32

Millat

611 silver badge3 bronze badges

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

2 Comments

Vectrobyte Over a year ago

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

daxxac Over a year ago

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

tmhao2005 · Accepted Answer · 2020-12-03 02:55:57Z

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;

answered Dec 3, 2020 at 2:55

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

1 Comment

maxrojas Over a year ago

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.

maxrojas · Accepted Answer · 2020-12-04 19:37:11Z

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!

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Problem

Solution

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Problem

Solution

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related