Question

我正在使用webpack来编译我的React / Redux应用程序。它在浏览器（红色屏幕）的屏幕上抛出错误，但在控制台中没有。有没有办法配置webpack指向它遇到此错误的确切组件/容器（文件）？

这是我得到的错误：

Error: bindActionCreators expected an object or a function, instead received undefined. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?

bindActionCreators
http://localhost:3000/dist/bundle.js:4049:2

mapDispatchToProps
http://localhost:3000/dist/bundle.js:1129:2

ProxyComponent.configureFinalMapDispatch
http://localhost:3000/dist/bundle.js:3381:2

ProxyComponent.configureFinalMapDispatch
http://localhost:3000/dist/bundle.js:3025:2

ProxyComponent.computeDispatchProps
http://localhost:3000/dist/bundle.js:3381:2

ProxyComponent.computeDispatchProps
http://localhost:3000/dist/bundle.js:3025:2

ProxyComponent.updateDispatchPropsIfNeeded
http://localhost:3000/dist/bundle.js:3381:2

ProxyComponent.updateDispatchPropsIfNeeded
http://localhost:3000/dist/bundle.js:3025:2

ProxyComponent.render
http://localhost:3000/dist/bundle.js:3381:2

ProxyComponent.render
http://localhost:3000/dist/bundle.js:3025:2

这是我的 webpack.dev.config.js 文件

const webpack = require('webpack');
const path = require('path');

module.exports = {
  devtool: 'eval-source-map',
  stats: {
    colors: true,
    children: false,
    assets: false,
  },
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    path.join(__dirname, '..', 'src', 'client', 'index.js'),
  ],
  output: {
    path: path.join(__dirname, '..', 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/',
  },
  module: {
    loaders: [{
      test: /\.js|jsx$/,
      loader: 'babel',
      exclude: /node_modules/,
      include: path.join(__dirname, '..', 'src', 'client'),
    },
    {
      test: /\.css$/,
      include: path.join(__dirname, '..', 'src', 'client'),
      loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[local]___[hash:base64:8]!postcss',
      ],
    },
    {
      test: /\.jpe?g|jpg|gif|svg|png$/,
      loader: 'url-loader?limit=8192',
    },
    {
      test: /\.ttf|woff|woff2|eot$/,
      loader: 'file',
    }],
  },
  postcss: function () {
    return [
      require('postcss-import'),
      require('postcss-constants')({
        defaults: Object.assign({},
          require('../src/styles/_globals/colors')),
      }),
      require('postcss-mixins'),
      require('postcss-nested'),
      require('postcss-cssnext')
    ];
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify({
        NODE_ENV: 'development',
      }),
      __DEV__: true,
      __PROD__: false,
    }),
  ],
};

感谢您的所有帮助，感激不尽。

Answer 1

您可以更改您的网络包行：

devtool: 'eval-source-map',

例如：

devtool: 'eval'

它将生成每个文件的源图，因此您可以看到错误的来源。

您可以在webpack here

中详细了解源地图

如何找到我的React / Redux错误来自哪里的文件？

1 个答案: