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.

Author: Fantashit

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

  1. 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.

  2. @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 🙂

Comments are closed.