在生产误差#105中反应Webpack

Question

我在这里有点绝望。

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

“小型化反应错误#105；访问http://facebook.github.io/react/docs/error-decoder.html?invariant=105&args[]=HardwareKeyboardArrowDown获取完整消息，或者使用非小型化的dev环境获取全部错误和其他有用的警告。”

后面跟着一堆"Uncaught :无法读取空的属性'__reactInternalInstance$qw6tjofxg1o‘“

当我将我的node.env设置为developement ('NODE_ENV'：JSON.stringify('developement') )时，它工作得很好。

错误中的链接说：“必须返回有效的React元素(或null)。您可能返回了未定义的数组或其他无效的对象”，但是在dev模式中没有任何问题，所以我认为它不是来自我的代码，我无法找到解决这个问题的地方，因为dev模式没有告诉我更多的事情……

这是我的webpack配置& 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;

{
  "name": "material-ui-example-webpack",
  "version": "0.16.0",
  "description": "Sample project that uses Material-UI",
  "repository": {
    "type": "git",
    "url": "https://github.com/callemall/material-ui.git"
  },
  "scripts": {
    "start": "webpack-dev-server --config webpack-dev-server.config.js --host $IP --port $PORT  --hot --progress --inline --colors",
    "clean-public": "npm run remove-public && mkdir public",
    "remove-public": "node_modules/.bin/rimraf ./public",
    "build:html": "babel-node tools/buildHtml.js",
    "heroku-prebuild": "npm install && npm-run-all clean-public build:html",
    "heroku-postbuild": "babel-node tools/build.js",
    "prod-start": "babel-node tools/publicServer.js"
  },
  "private": true,
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-2": "^6.18.0",
    "html-webpack-plugin": "^2.24.1",
    "npm-run-all": "1.8.0",
    "redux-devtools": "^3.4.0",
    "redux-devtools-dock-monitor": "^1.1.2",
    "redux-devtools-log-monitor": "^1.3.0",
    "rimraf": "2.5.2",
    "transfer-webpack-plugin": "^0.1.4",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "babel-cli": "6.8.0",
    "babel-loader": "^6.2.8",
    "babel-polyfill": "6.8.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-stage-2": "^6.24.1",
    "cheerio": "^0.20.0",
    "colors": "1.1.2",
    "compression": "^1.6.1",
    "css-loader": "^0.27.3",
    "express": "^4.15.2",
    "json-loader": "^0.5.4",
    "lint": "^1.1.2",
    "material-ui": "^0.17.1",
    "ncp": "^2.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "react": "^15.4.1",
    "react-component-queries": "^2.1.1",
    "react-dom": "^15.4.1",
    "react-fittext": "https://github.com/gianu/react-fittext",
    "react-flexbox-grid": "^1.0.2",
    "react-html-parser": "^1.0.3",
    "react-masonry-component": "^5.0.5",
    "react-redux": "^5.0.4",
    "react-responsive": "^1.2.7",
    "react-router": "^2.0.0-rc5",
    "react-router-dom": "^4.0.0",
    "react-sizeme": "^2.3.1",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.6.0",
    "redux-form": "^6.6.3",
    "redux-promise": "^0.5.3",
    "rimraf": "2.5.2",
    "serve-favicon": "^2.3.0",
    "style-loader": "^0.16.0",
    "transfer-webpack-plugin": "^0.1.4",
    "webpack": "^1.13.3"
  }
}

buildHtml脚本：

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

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

如果需要的话我可以提供更多的信息。谢谢你读我的文章

Answer 1

好的，我没有一个带有HardwareKeyboardArrowDown的对象，所以我查看了我的依赖项，我发现它来自mat依赖项。

我在我的package.json中强制使用了17.4版本，它起了作用！

Answer 2

消息给出了返回无效对象的函数(组件)的名称。HardwareKeyboardArrowDown。

因此，您应该查看其return函数的render，并确保返回一个有效的function元素(或null)。

这意味着没有undefined，array等。