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 .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?

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?

• javascript
• reactjs
• browserify
• transpiler

• return null always for default for ReactDom.render() – zloctb Commented Apr 19, 2018 at 9:58

3 Answers 3

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.

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.

Set

mode: 'development' 

in webpack.config.js in the root.