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