Babel loader won't work with webpack 2 and react

[rafallyczkowski]

I'm struggling with babel loader

I'm getting:

ERROR in ./app.js
Module parse failed: /DIR/project/app.js Unexpected token (8:15)
You may need an appropriate loader to handle this file type.
| class FasetDirectoryListing extends React.Component {
|     render() {
|         return <div>asdas</div>
|     }
| }
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app.js
webpack: Failed to compile.

app.js

import React from 'react';
import ReactDOM from 'react-dom';
// import FasetDirectoryListing from './components/FasetDirectoryListing.js';

class FasetDirectoryListing extends React.Component {
    render() {
        return <div>asdas</div>
    }
}

ReactDOM.render(
    React.createElement(FasetDirectoryListing, {
        filters: {
        },
    }),
    document.getElementById('app')
);

webpack.config.js

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

module.exports = {
  entry: './app.js',
  output: { path: __dirname, filename: 'bundle.js' },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loaders: 'babel-loader',
        exclude: /node_modules/,
        include: path.join (__dirname, './components'),
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

package.json

{
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-es2015": "^6.22.0",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.1",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  }
}

[Tvrqvoise]

I'm getting the same issue. babel-loader@6.3.0 does not exhibit this issue, but the moment I upgrade to babel-loader@6.3.1, it starts happening.

Further, I am able to "fix" the issue by not specifying the env option in my babelrc. (which makes sense, as the changes in this release were all env-related).

For example, this config throws the above error in version 6.3.1 (but works in 6.3.0):

{
  "env": {
    "production": {
      "presets": [
        ["es2015", {
          "modules": false
        }],
        "react",
        "stage-1"
      ]
    },
    "development": {
      "presets": [
        ["env", {
            "targets": {
              "chrome": 54
            },
            "loose": true,
            "modules": false,
            "include": ["transform-es2015-classes"]
        }],
        "react",
        "stage-1"
      ],
      "plugins": [
        "babel-plugin-transform-es2015-parameters",
        "babel-plugin-transform-es2015-destructuring"
      ]
    },
    "test": {
      "sourceMap": "inline",
      "presets": [
        "es2015",
        "react",
        "stage-1"
      ],
      "plugins": [
        "transform-amd-to-commonjs"
      ]
    }
  }
}

But this config works without issue:

{
  "presets": [
    ["env", {
        "targets": {
          "chrome": 54
        },
        "loose": true,
        "modules": false,
        "include": ["transform-es2015-classes"]
    }],
    "react",
    "stage-1"
  ],
  "plugins": [
    "babel-plugin-transform-es2015-parameters",
    "babel-plugin-transform-es2015-destructuring"
  ]
}

@mbm-rafal What are the contents of your babel configuration file?

[MoOx]

Probably dup of #381

[danez]

@Tvrqvoise This was fixed in 6.3.2

@mbm-rafal Your webpack config says include: path.join (__dirname, './components'), which means only js files inside that folder will use babel-loader, your app.js seems to be outside this folder.

[rafallyczkowski]

@danez it does not matter, I was jumping aroung with include. I've moved app.js into components and it does not work. I'm currently testing different version of babel

Node: v6.1.0
Webpack: 2.2.1
NPM: 3.8.6

module.exports = {
  entry: './app.js',
  output: { path: __dirname, filename: 'bundle.js' },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loaders: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react', 'stage-1']
        }
      }
    ]
  },
};

./app.js

import React from 'react';
import ReactDOM from 'react-dom';

class FasetDirectoryListing {
  render() {
    return <div>adsa</div>;
  }
}

ReactDOM.render(
    React.createElement(FasetDirectoryListing, {
        filters: {
        },
    }),
    document.getElementById('app')
);

➜  project git:(project-beta) ✗ npm list | grep babel
├─┬ babel-core@6.23.1
│ ├─┬ babel-code-frame@6.22.0
│ ├─┬ babel-generator@6.23.0
│ ├── babel-helpers@6.23.0
│ ├── babel-messages@6.23.0
│ ├─┬ babel-register@6.23.0
│ ├─┬ babel-runtime@6.23.0
│ ├── babel-template@6.23.0
│ ├─┬ babel-traverse@6.23.1
│ ├─┬ babel-types@6.23.0
├─┬ babel-loader@6.3.2
├─┬ babel-preset-es2015@6.22.0
│ ├── babel-plugin-check-es2015-constants@6.22.0
│ ├── babel-plugin-transform-es2015-arrow-functions@6.22.0
│ ├── babel-plugin-transform-es2015-block-scoped-functions@6.22.0
│ ├── babel-plugin-transform-es2015-block-scoping@6.23.0
│ ├─┬ babel-plugin-transform-es2015-classes@6.23.0
│ │ ├── babel-helper-define-map@6.23.0
│ │ ├── babel-helper-function-name@6.23.0
│ │ ├── babel-helper-optimise-call-expression@6.23.0
│ │ └── babel-helper-replace-supers@6.23.0
│ ├── babel-plugin-transform-es2015-computed-properties@6.22.0
│ ├── babel-plugin-transform-es2015-destructuring@6.23.0
│ ├── babel-plugin-transform-es2015-duplicate-keys@6.22.0
│ ├── babel-plugin-transform-es2015-for-of@6.23.0
│ ├── babel-plugin-transform-es2015-function-name@6.22.0
│ ├── babel-plugin-transform-es2015-literals@6.22.0
│ ├── babel-plugin-transform-es2015-modules-amd@6.22.0
│ ├─┬ babel-plugin-transform-es2015-modules-commonjs@6.23.0
│ │ └── babel-plugin-transform-strict-mode@6.22.0
│ ├─┬ babel-plugin-transform-es2015-modules-systemjs@6.23.0
│ │ └── babel-helper-hoist-variables@6.22.0
│ ├── babel-plugin-transform-es2015-modules-umd@6.23.0
│ ├── babel-plugin-transform-es2015-object-super@6.22.0
│ ├─┬ babel-plugin-transform-es2015-parameters@6.23.0
│ │ ├── babel-helper-call-delegate@6.22.0
│ │ └── babel-helper-get-function-arity@6.22.0
│ ├── babel-plugin-transform-es2015-shorthand-properties@6.22.0
│ ├── babel-plugin-transform-es2015-spread@6.22.0
│ ├─┬ babel-plugin-transform-es2015-sticky-regex@6.22.0
│ │ └── babel-helper-regex@6.22.0
│ ├── babel-plugin-transform-es2015-template-literals@6.22.0
│ ├── babel-plugin-transform-es2015-typeof-symbol@6.23.0
│ ├─┬ babel-plugin-transform-es2015-unicode-regex@6.22.0
│ └─┬ babel-plugin-transform-regenerator@6.22.0
├─┬ babel-preset-react@6.23.0
│ ├── babel-plugin-syntax-jsx@6.18.0
│ ├── babel-plugin-transform-react-display-name@6.23.0
│ ├─┬ babel-plugin-transform-react-jsx@6.23.0
│ │ └── babel-helper-builder-react-jsx@6.23.0
│ ├── babel-plugin-transform-react-jsx-self@6.22.0
│ ├── babel-plugin-transform-react-jsx-source@6.22.0
│ └─┬ babel-preset-flow@6.23.0
│   └─┬ babel-plugin-transform-flow-strip-types@6.22.0
│     └── babel-plugin-syntax-flow@6.18.0
├─┬ babel-preset-stage-1@6.22.0
│ ├─┬ babel-plugin-transform-class-constructor-call@6.22.0
│ │ └── babel-plugin-syntax-class-constructor-call@6.18.0
│ ├─┬ babel-plugin-transform-export-extensions@6.22.0
│ │ └── babel-plugin-syntax-export-extensions@6.13.0
│ └─┬ babel-preset-stage-2@6.22.0
│   ├── babel-plugin-syntax-dynamic-import@6.18.0
│   ├─┬ babel-plugin-transform-class-properties@6.23.0
│   │ └── babel-plugin-syntax-class-properties@6.13.0
│   ├─┬ babel-plugin-transform-decorators@6.22.0
│   │ ├─┬ babel-helper-explode-class@6.22.0
│   │ │ └── babel-helper-bindify-decorators@6.22.0
│   │ └── babel-plugin-syntax-decorators@6.13.0
│   └─┬ babel-preset-stage-3@6.22.0
│     ├── babel-plugin-syntax-trailing-function-commas@6.22.0
│     ├─┬ babel-plugin-transform-async-generator-functions@6.22.0
│     │ ├── babel-helper-remap-async-to-generator@6.22.0
│     │ └── babel-plugin-syntax-async-generators@6.13.0
│     ├─┬ babel-plugin-transform-async-to-generator@6.22.0
│     │ └── babel-plugin-syntax-async-functions@6.13.0
│     ├─┬ babel-plugin-transform-exponentiation-operator@6.22.0
│     │ ├─┬ babel-helper-builder-binary-assignment-operator-visitor@6.22.0
│     │ │ └── babel-helper-explode-assignable-expression@6.22.0
│     │ └── babel-plugin-syntax-exponentiation-operator@6.13.0
│     └─┬ babel-plugin-transform-object-rest-spread@6.23.0
│       └── babel-plugin-syntax-object-rest-spread@6.13.0

[rafallyczkowski]

@danez not sure, but it worked when I pulled out my project directory from ../node_modules/searchkit/project/components/ which was producting something like this
../node_modules/searchkit/project/node_modules/...

when I copied /project/ folder in any other place and just run npm start it worked good.
So this issue is related to execution context ?

[danez]

no the problem is probably that the folder is inside a node_modules folder, but you are ignoring node_modules

[rafallyczkowski]

@danez correct! Removing this line worked! How come this was related to where directory is suited ? Is this preventing all node_module directories on working path to be exluded ?

[danez]

This webpack options is a simple regex against the path, so yes it will exclude every file that is somewhere inside a node_modules folder, no matter where in the folder structure this appears.
In your case you can try to be more specific in the exclude with something like /project\/node_modules/, but not sure if that works.