How to find the file where my React/Redux error is coming from?

问题

I'm using webpack to compile my React/Redux app. It's throwing an error on screen in the browser (red screen), but not in the console. Is there a way to configure webpack to point to the exact component/container (file) where it's running into this error?

Here is the error I'm getting:

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

Here is my webpack.dev.config.js file

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

Thanks for any and all help, appreciate it.

回答1:

you can change your webpack line:

devtool: 'eval-source-map',

into for example:

devtool: 'eval'

It will generate the sourcemaps of every file, so you can see where does the error come from.

You can learn more about source maps in webpack here

来源：https://stackoverflow.com/questions/41486365/how-to-find-the-file-where-my-react-redux-error-is-coming-from

标签

reactjs

Webpack

redux