[英]React saids Minified React error even it is development mode
I'm using browserify and babel to transpile & bundle my script.我正在使用 browserify 和 babel 来转换和捆绑我的脚本。 The problem is when I'm using React 16, it gives me this error message:问题是当我使用 React 16 时,它给了我这个错误信息:
Uncaught Error: Minified React error #200;未捕获的错误:缩小 React 错误 #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.访问http://facebook.github.io/react/docs/error-decoder.html?invariant=200获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。
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>
. 我的错误是我试图在没有根元素<div id="app"> </div>
模板中注入bundle.js
。 Hence moved bundle.js and root element in a template that needed it and not the rest. 因此,在需要它的模板中移动了bundle.js和root元素,而不是其余的。 That solved it. 这解决了它。
Set 组
mode: 'development'
in webpack.config.js
in the root. 在根目录中的webpack.config.js
中。
Check to make sure you're importing from React and not the minified library.检查以确保您是从 React 导入而不是缩小的库。
❌ import { useState } from "react/cjs/react.production.min"
❌ import { useState } from "react/cjs/react.production.min"
✅ import { useState } from "react"
✅ import { useState } from "react"
It can be easy to accidently auto-import the wrong library.很容易不小心自动导入错误的库。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.