如何让抛出的错误冒出来?

时间:2015-09-02 17:29:05

标签: javascript reactjs webpack

当我需要一个抛出错误的模块时,它最终会返回一个空模块,而不是让错误冒出来。

我的代码如下:

var module = require("./path/to/the-module");
doSomethingWithComponent(module.mainComponent);

当没有抛出错误时,模块看起来像:

{
  getters: []
  actions: []
  mainComponent: <TheComponent />
}

出现错误时,它最终会像:

{}

破坏组件的一个例子如下:

var TheComponent = React.createClass({
  getDefaultProps() {
    return { x: this.props.x };
  }
});

使用Chrome&#34;暂停捕获的例外情况&#34;选项我已经发现异常正在发生,但它被抓住了。我无法追查被抓住的地方。

这是发生错误的屏幕截图:

caught error

这是一个屏幕截图,突出显示如何将其设置为空对象:

webpack empty object

我的webpack配置如下:

var _ = require('lodash');
var path = require('path');
var fs = require('fs');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var vendorLibs = {
  _: 'lodash',
  $: 'jquery',
  jQuery: 'jquery',
  bootstrap: 'bootstrap',
  key: 'mousetrap',
  React: 'react/addons',
  debug: 'debug',
  cx: 'classnames',
  Immutable: 'immutable',
  immstruct: 'immstruct',
  interact: 'interact.js'
};
var providePlugin = {
  Mixins: path.join(__dirname, 'src', 'app', 'mixins', 'index.js'),
  Util: path.join(__dirname, 'src', 'app', 'lib', 'Util.js'),
  reactor: path.join(__dirname, 'src', 'app', 'reactor.js')
};

var config = {
  entry: {
    app: './src/app/components/App.jsx',
    vendor: _.values(vendorLibs)
  },
  output: {
    path: './src/compiled/js',
    filename: 'app.js'
  },
  module: {
    loaders: [{
      test: /^(?!.*node_modules)+.+\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.json5$/,
      loader: 'json5-loader'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader')
    }, {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader!less-loader')
    }, {
      test: /\.png$/,
      loader: 'file'
    }, {
      test: /\.(ttf|eot|svg|woff2?)(\?v=(\d|\.)+)?$/,
      loader: 'file?name=../fonts/[hash].[ext]'
    }]
  },
  resolve: {
    root: [
      path.join(__dirname, 'src', 'app'),
      path.join(__dirname, 'src', 'app', 'components'),
      path.join(__dirname, 'src', 'less'),
      path.join(__dirname, 'src', 'icons')
    ],
    extensions: [
      '', '.jsx', '.js'
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(['main'])
    ),
    new webpack.ProvidePlugin(_.extend({}, vendorLibs, providePlugin)),
    new ExtractTextPlugin('../css/app.css', { allChunks: true })
  ]
};

module.exports = config;

这个应用程序也在使用NuclearJS,所需的这个组件是一个动作被调度的结果,所以它可能也可以在那里捕获它。

我希望这个错误不会被捕获,以便我可以发现并解决它而不会潜入调试器。有谁知道我怎么能做到这一点?

1 个答案:

答案 0 :(得分:0)

原来有一段代码带有try / catch,看起来很无辜,但导致了这个问题。在我发现我可以解决问题之后。它看起来像这样:

    try {
      require(`modules/${variableValue}/index`);
    } catch (err) {
      dbg(`Cannot load module ${variableValue}`);
    }

dbg未登录浏览器,因此我没有看到它。