Reactjs 在生产错误中对网页进行响应#105

我有点绝望了

我正在开发一个React应用程序，并使用webpack编译bundle.js。 问题是，当我试图为“生产”编译它时，我最终遇到了一个非常严重的错误：

“缩小的反应错误#105；访问获取完整消息，或使用非缩小的开发环境获取完整错误和其他有用警告。”

接着是一堆 “未捕获的TypeError:无法读取null的属性'\uu reactInternalInstance$qw6tjofxg1o'”

当我将node.env设置为developement（'node_env'：JSON.stringify（'developement'））时，它工作正常

错误中的链接说：“必须返回一个有效的React元素（或null）。您可能返回了未定义的、数组或其他一些无效的对象”，但我在开发模式下没有任何问题，所以我不认为它来自我的代码，我找不到解决这个问题的方法，因为开发模式没有告诉我更多的东西

以下是我的网页包config&package.json：

const webpack = require('webpack');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');

const config = {
    entry: [
    './src/app/app.js'
  ],
  // Render source-map file for final build
  devtool: 'source-map',
  debug: true,
  // output config
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },

  plugins: [
    // Define production build to allow React to strip out unnecessary checks
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify('production')
      }
    }),

    // Minify the bundle
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        // suppresses warnings, usually from module minification
        warnings: false,
      },
    }),
    // Allows error warnings but does not stop compiling.
    new webpack.NoErrorsPlugin(),
    // Transfer Files

  ],
  module: {
    loaders: [
      {
        test: /\.js$/, // All .js files
        loaders: ['babel-loader'], // react-hot is like browser sync and babel loads jsx and es6-7
        exclude: [nodeModulesPath],
      },
       {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
        include: /flexboxgrid/
      },
      {
        test: /\.json$/, loader: "json-loader",
      },
      { test: /\.scss?$/,
        loader: 'style!css!sass',
        include: path.join(__dirname, 'src', 'styles') },
      { test: /\.png$/,
        loader: 'file' },
      { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: 'file'}
    ],

    resolve: {
      extensions: ['', '.js', '.jsx', '.css', '.json']
  }
  },
};

module.exports = config;

---

构建HTML脚本：

import fs from 'fs';  
import cheerio from 'cheerio';  
import colors from 'colors';

/*eslint-disable no-console */
console.log("buildHTML.js start");
fs.readFile('src/index.html', 'utf8', (err, markup) => {  
  if (err) {
    return console.log(err);
  }

  const $ = cheerio.load(markup);
  $('head').prepend('');

  fs.writeFile('public/index.html', $.html(), 'utf8', function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('index.html written to /public'.green);
  });
});

然后是build.js

/*eslint-disable no-console */
import webpack from 'webpack';  
import webpackConfig from '../webpack-production.config';  
import colors from 'colors';
import ncp from 'ncp';

process.env.NODE_ENV = 'production'; 
console.log("build.js start");
//Static files to import in /public (images/css)
var source = [["src/images","public/images"],["src/css","public/css"]];

function copyStaticFiles(path){
    ncp(path[0], path[1], function (err) {
  if (err) {
     return console.error(err);
  }})
}

console.log('Generating minified bundle for production via Webpack...'.blue);

webpack(webpackConfig).run((err, stats) => {  

  if (err) { // so a fatal error occurred. Stop here.
    console.log(err.bold.red);
    return 1;
  }

  const jsonStats = stats.toJson();

  if (jsonStats.hasErrors) {
    return jsonStats.errors.map(error => console.log(error.red));
  }

  if (jsonStats.hasWarnings) {
    console.log('Webpack generated the following warnings: '.bold.yellow);
    jsonStats.warnings.map(warning => console.log(warning.yellow));
  }

  console.log(`Webpack stats: ${stats}`);

  source.forEach(copyStaticFiles);

  console.log('Your app has been compiled in production mode and written to /public.'.green);

  return 0;
});

我甚至不知道从哪里开始，也找不到任何关于此类错误的文档

如果需要，我可以提供更多信息。

---

感谢您阅读我的消息，该消息提供了返回无效对象的函数（组件）的名称<代码>硬件键盘箭头向下
因此，您应该查看其

render

函数的

return

，并确保返回有效的React元素（或null）

---

这意味着没有

未定义的

，

数组

等..

好的，所以我没有一个带有硬件键盘箭头的对象，所以我去查看我的依赖项，发现它来自matérial ui依赖项

---

我在package.json中强制使用了17.4版本，它成功了

你能把

硬件键盘箭头所示的jsx贴下来吗？
/*eslint-disable no-console */
import webpack from 'webpack';  
import webpackConfig from '../webpack-production.config';  
import colors from 'colors';
import ncp from 'ncp';

process.env.NODE_ENV = 'production'; 
console.log("build.js start");
//Static files to import in /public (images/css)
var source = [["src/images","public/images"],["src/css","public/css"]];

function copyStaticFiles(path){
    ncp(path[0], path[1], function (err) {
  if (err) {
     return console.error(err);
  }})
}

console.log('Generating minified bundle for production via Webpack...'.blue);

webpack(webpackConfig).run((err, stats) => {  

  if (err) { // so a fatal error occurred. Stop here.
    console.log(err.bold.red);
    return 1;
  }

  const jsonStats = stats.toJson();

  if (jsonStats.hasErrors) {
    return jsonStats.errors.map(error => console.log(error.red));
  }

  if (jsonStats.hasWarnings) {
    console.log('Webpack generated the following warnings: '.bold.yellow);
    jsonStats.warnings.map(warning => console.log(warning.yellow));
  }

  console.log(`Webpack stats: ${stats}`);

  source.forEach(copyStaticFiles);

  console.log('Your app has been compiled in production mode and written to /public.'.green);

  return 0;
});