web-dev-qa-db-fra.com

React dit l'erreur de réaction minifiée même s'il s'agit d'un mode de développement

J'utilise browserify et babel pour transpiler et regrouper mon script. Le problème est que lorsque j'utilise React 16, le message d'erreur suivant s'affiche:

Erreur non capturée: erreur de réaction minifiée n ° 200; visitez http://facebook.github.io/react/docs/error-decoder.html?invariant=200 pour le message complet ou utilisez l'environnement de développement non minifié pour les erreurs complètes et les avertissements utiles supplémentaires.

Je sais ce que signifie, mais je suis déjà en mode développement, pas en 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();
}

Pourquoi cela se produit et comment résoudre ce problème? 

javascriptreactjsbrowserifytranspiler
5
modernator

Mon erreur était que j'essayais d'injecter bundle.js dans des modèles qui ne comportaient aucun élément racine <div id="app"> </div>. . Ainsi, bundle.js et l'élément racine ont été déplacés dans un modèle qui en avait besoin, et non le reste. Cela l'a résolu.

1
Deke

Ensemble 

mode: 'development'

dans webpack.config.js à la racine. 

0
Akhilesh