Webpack's Acorn Dependency Choking on JSX on Node 6.0+ (Babel-Loader Not Being Loaded Correctly?)

JSX code for me that works on Node 5.11 is failing with Node 6. It appears to be a problem with the Acorn module Webpack is relying on.

ERROR in ./src/index.js Module parse failed: c:\code\app\src\index.js Unexpected token (17:2) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (17:2) at Parser.pp.raise (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13) at Parser.pp.unexpected (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8) at Parser.pp.parseExprAtom (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12) at Parser.pp.parseExprSubscripts (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19) at Parser.pp.parseMaybeUnary (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17) at Parser.pp.parseExprOps (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)

at Parser.pp.parseMaybeConditional (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExprList (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
at Parser.pp.parseSubscripts (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)

@ multi main

Extra info:

Webpack version: 1.13.0

Referenced Acorn version within Webpack’s node_modules: 3.1.0

Chunk of code the parser is choking on:

render( <Root />, document.getElementById('root') );

It seems to just choke on basic JSX syntax. However, if I downgrade Node back to 5.11 it works as it should.

[creamidea]

@lmanco You are right. And I watch the program:

LoadersList.prototype.matchObject = function matchObject(str, obj) {
    if(obj.test)
        if(!this.matchPart(str, obj.test)) return false;
    if(obj.include)
        if(!this.matchPart(str, obj.include)) return false;
    if(obj.exclude)
        if(this.matchPart(str, obj.exclude)) return false;
    return true;
};

Here, code shows that webpack will test the include. So, if the value of includeon different OS will make the result different. You can click issue#19 to learn more. At last, I recommend to replace __dirname + '/app' with path.resolve(__dirname, 'app').

Good luck 😃

[lmanco]

I’m still getting this error regardless of what version of Node I use. I have done npm cache clean after removing node_modules and changing versions every time. Does anyone have any more information on this?

My webpack config is:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    './app/main.jsx'
  ],
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devtool: 'source-map',
  devServer: {
    inline: true,
    contentBase: './dist',
    port: 8100
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: './app'
      },
      {
        test: /\.less$/,
        loader: "style!css!postcss!less",
        include: './app/theme'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ]
};

My .babelrc is:

{
  "presets": [
    "react",
    "es2015"
  ]
}

Any help with this would be greatly appreciated.

UPDATE:

Changing my include to __dirname + '/app' seems to have fixed this. It’s working fine with Node 6.2.2. Hopefully this might help anyone else who comes across this.