webpack babel build error after cleaning up node_modules folder

Question

Running into the following error after clearing out the node_modules folder and do a clean npm build and running webpack.

Can someone help me to understand the error I am getting? im new to webpack.

following snippet is my 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

FWIW My issue was a wonky declaration of a React component:

export const Foo = class extends React.Component {...}

Changed it to a normal class declaration fixed the issue. I could imagine in your case it was something similar. (The issue for me was also caused by babel-plugin-rewire but I didn't want to remove it from the project yet.)

Answer 2

I had a similar situation today after doing clean npm install on old project. It seems that babel-plugin-rewire is to blame. In my case, I found two solutions.

First solution was to roll back from babel-plugin-rewire@1.0.0-rc-5 to 1.0.0-rc-4

I choose the other solution, which might be not applicable in your case. In my .babelrc I had rewire plugin declared at top level, so I moved it into test environment. So my my .babelrc changed from

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

to this:

{
  "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"
      ]
    }
  }
}