Question

我正在使用browserify和babel进行翻译。捆绑我的脚本。问题是当我使用React 16时，它给了我这个错误信息：

未捕获错误：Minified React错误＃200;访问http://facebook.github.io/react/docs/error-decoder.html?invariant=200以获取完整的消息，或使用非缩小的开发环境获取完整错误和其他有用的警告。

我知道什么是意义，但我已经处于开发模式，而不是生产。

// 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();
}

为什么会发生这种情况以及如何解决这个问题？

Answer 1

我的错误是我试图将bundle.js插入没有根元素<div id="app"> </div>的模板中。因此，将bundle.js和根元素移到需要它的模板中，而不需要其余元素。解决了。

Answer 2

设置

mode: 'development'

在根目录中的webpack.config.js中。

React表示Minified React错误，即使它是开发模式

2 个答案: