React - Minified exception occurred

Question

I have React js installed via NPM and using browserify to manage components in react. When an exception occurs in React, the console shows as

"Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings."

How do I enable full error messages ?

Answer 1

Setting NODE_ENV to development as Benjamin Gruenbaum pointed out in the comment resolved the issues.

set NODE_ENV=development

Answer 2

If you are encountering this issue with Karma + Webpack, the following Webpack configuration fixed the issue for me when running tests:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('development')
        }
    })
]

Answer 3

I FINALLY SOLVED THIS.

If you're like me and ran that command to set NODE_ENV and it's literally never worked, check if you're linking to react.min.js instead of the full versions of the files.

Link to the full versions and it should work like a charm. :D

Answer 4

If you are using jspm to bundle your code, note that version 0.16.24 imports the minified "production" version of React, which throws this error. My temporary solution was to downgrade jspm to 0.16.23.

edit Future versions of jspm will allow you to declare production vs. development versions (see jspm beta documentation)

Answer 5

I had this issue, and for me I didn't need to disable minification or use react source. My script was just loading before the root element. So I just moved the script out of the head and below the div in the index file source code and that fixed it.

Changed my index.jade from this:

html
 head
   title Super coo site
   script(src="bundle.js")
 body
   div#root

To this:

html
 head
   title Super coo site
 body
   div#root
   script(src="bundle.js")

Answer 6

I got this error when my render method returned undefined eg

render() {
    let view;
    // Not paying attention and slip a case where view won't get assigned a value
    if(this.props.foo == 'hello') {
        view = <HelloView />
    }
    else if(this.props.foo == 'bye') {
        view = <ByeView />
    }
    return view;
}

This will trigger the error when this.props.foo is 'hi'

Answer 7

Have you check the DOM element that you are trying render ? I had this error before due to a silly mistake. The worst part is bundle was minified. The element id is not same

Index.html

<div id="ds-app"></div>

app.jsx

React.DOM.render(<App/>, document.getElementById('app'))

Answer 8

As of version 15.2, production React error messages (NODE_ENV=production) now include a URL that you can visit where you can see the original, unobfuscated error.

https://twitter.com/dan_abramov/status/748969886433546240

You should consider upgrading to React 15.2 in order to get access to these error messages. Additionally, some production crash reporting tools automatically unminify these errors for you.

Answer 9

use the min.js files in production or bundle your application code with process.env.NODE_ENV === 'production' and you should be good to go!

Answer 10

If your package.json scripts has dll， try exec npm run dll or yarn run dll.

Answer 11

I am developing my first Shopify app and using heroku to host it. Nothing worked for me until I discovered this topic and one other. Here is my vite.config.js:

import react from "@vitejs/plugin-react";
import "dotenv/config";

/**
 * @type {import('vite').UserConfig}
 */
export default {
    define: {
        "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    },
    //plugins: [react()],
    plugins: [
        process.env.NODE_ENV !== `production` ? react({
            jsxRuntime: `classic`,
        }) : react(),
    ],
};

NODE_ENV=development

I hope this helps someone

Answer 12

In my case, it was because of package-lock.json. Delete and redeploy