CODEWITHSUNDEEP
javascriptreactjsbrowserifytranspiler
modernator
modernator

Reputation: 4427

React saids Minified React error even it is development mode

I'm using browserify and babel to transpile & bundle my script. The problem is when I'm using React 16, it gives me this error message:

Uncaught Error: Minified React error #200; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I know what is meaning, but I'm already in development mode, not production.

// gulpfile.js
const isProduction = config.environment === 'production';

if(isProduction) {
    process.env.NODE_ENV = 'production';
}
else {
    process.env.NODE_ENV = 'development';
}

console.log(process.env.NODE_ENV);    // it saids: development

function buildJs() {
    let bopts = {
        paths: [
            `${SRC_DIR}/js`,
            `${SRC_DIR}/scss`
        ],
        debug: true
    };
    let opts = Object.assign({}, watchify.args, bopts);

    let b = watchify(persistify(opts))
    .add(`${SRC_DIR}/js/index.js`)
    .on('update', bundle)
    .on('log', gutil.log)
    .transform(babelify, { 
        presets: ["es2015", "react"]
    })
    .transform(scssify, {
        autoInject: true
    });

    function bundle() {
        let stream = b.bundle()
        .on('error', swallowError)
        .on('end', () => {
            browserSync.reload();
        })
        .on('error', swallowError)
        .pipe(source('bundle.js'));

        if(isProduction) {
            stream.pipe(streamify(uglify()));
        }

        return stream.pipe(gulp.dest(`${BUILD_DIR}/js`));
    }

    return bundle();
}

Why this happens and how to fix this?

Upvotes: 10

Views: 16973

Answers (3)

Matthew Willox
Matthew Willox

Reputation: 11

Check to make sure you're importing from React and not the minified library.

❌import { useState } from "react/cjs/react.production.min"

✅import { useState } from "react"

It can be easy to accidently auto-import the wrong library.

Upvotes: 0

Deke
Deke

Reputation: 4659

My error was I was trying to inject bundle.js in templates that had no root element <div id="app"> </div>. Hence moved bundle.js and root element in a template that needed it and not the rest. That solved it.

Upvotes: 5

Akhilesh
Akhilesh

Reputation: 47

Set 

mode: 'development'

in webpack.config.js in the root.

Upvotes: -2

Related Questions