清理node_modules文件夹后webpack babel构建错误

Question

清除 node_modules 后遇到以下错误文件夹并清理干净 npm build并运行 webpack。

有人可以帮助我了解我遇到的错误吗？我是 webpack 的新手。

以下片段是我的 webpack.config

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

var config = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './app/main'
  ],
  output: {
    path: path.join(__dirname, 'public', 'js'),
    filename: 'bundle.js',
    publicPath: '/js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          plugins: [
            ['react-transform', {
              transforms: [
                {
                  transform: 'react-transform-hmr',
                  imports: ['react'],
                  locals: ['module']
                }, {
                  transform: 'react-transform-catch-errors',
                  imports: ['react', 'redbox-react']
                }
              ]
            }]
          ],
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', 'css', 'scss']
  },
};

ERROR in ./app/components/App.js Module build failed: TypeError: /Users/ericlin/projects/360/app/components/App.js: Property id of VariableDeclarator expected node to be of a type ["LVal"] but instead got "CallExpression" at Object.validate (/Users/ericlin/projects/360/node_modules/babel-types/lib/definitions/index.js:109:13) at Object.validate (/Users/ericlin/projects/360/node_modules/babel-types/lib/index.js:541:9) at NodePath._replaceWith (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/replacement.js:208:7) at NodePath.replaceWith (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/replacement.js:186:8) at RewireState.Identifier (/Users/ericlin/projects/360/node_modules/babel-plugin-rewire/lib/babel-plugin-rewire.js:176:10) at NodePath._call (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:76:18) at NodePath.call (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:48:17) at NodePath.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:106:12) at TraversalContext.visitQueue (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16) at TraversalContext.visitSingle (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:118:19) at TraversalContext.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:211:19) at Function.traverse.node (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:161:17) at NodePath.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:116:19) at TraversalContext.visitQueue (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16) at TraversalContext.visitMultiple (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:113:17) at TraversalContext.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:209:19) at Function.traverse.node (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:161:17) at NodePath.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:116:19) at TraversalContext.visitQueue (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16) at TraversalContext.visitMultiple (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:113:17) at TraversalContext.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:209:19) at Function.traverse.node (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:161:17) at traverse (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/index.js:83:12) at NodePath.traverse (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/index.js:147:25) at PluginPass.exit (/Users/ericlin/projects/360/node_modules/babel-plugin-rewire/lib/babel-plugin-rewire.js:199:11) at newFn (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/visitors.js:301:19) at NodePath._call (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:76:18) at NodePath.call (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:48:17) at NodePath.visit (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/path/context.js:118:8) at TraversalContext.visitQueue (/Users/ericlin/projects/360/node_modules/babel-traverse/lib/context.js:167:16) @ ./app/routes.js 31:11-38

Answer 1

在旧项目上进行干净的 npm install 后，我今天遇到了类似的情况。看来babel-plugin-rewire是罪魁祸首。就我而言，我找到了两个解决方案。

第一个解决方案是从 babel-plugin-rewire@1.0.0-rc-5 回滚至 1.0.0-rc-4
我选择了其他解决方案，这可能不适用于您的情况。在我的 .babelrc我有 rewire插件在顶层声明，所以我把它移到 test环境。所以我的 .babelrc从改变

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "syntax-class-properties",
    "transform-class-properties",
    "syntax-object-rest-spread",
    "transform-object-rest-spread",
    "rewire"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

对此:

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "syntax-class-properties",
    "transform-class-properties",
    "syntax-object-rest-spread",
    "transform-object-rest-spread"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "plugins": [
        "rewire"
      ]
    }
  }
}