Babel-loader: Babel loader won't work with webpack 2 and react

Created on 15 Feb 2017  ·  10Comments  ·  Source: babel/babel-loader

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"
  }
}
question
Source
picture mbm-rafal

Most helpful comment

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

picture danez on 16 Feb 2017
👍4 🎉3

All 10 comments

I'm getting the same issue. [email protected] does not exhibit this issue, but the moment I upgrade to [email protected], 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?

Tvrqvoise picture Tvrqvoise on 16 Feb 2017

Probably dup of https://github.com/babel/babel-loader/issues/381

MoOx picture MoOx on 16 Feb 2017

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

danez picture danez on 16 Feb 2017
👍2

@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
├─┬ [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ └─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│   ├── [email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]
│   ├─┬ [email protected]
│   │ ├─┬ [email protected]
│   │ │ └── [email protected]
│   │ └── [email protected]
│   └─┬ [email protected]
│     ├── [email protected]
│     ├─┬ [email protected]
│     │ ├── [email protected]
│     │ └── [email protected]
│     ├─┬ [email protected]
│     │ └── [email protected]
│     ├─┬ [email protected]
│     │ ├─┬ [email protected]
│     │ │ └── [email protected]
│     │ └── [email protected]
│     └─┬ [email protected]
│       └── [email protected]
mbm-rafal picture mbm-rafal on 16 Feb 2017

@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 ?

mbm-rafal picture mbm-rafal on 16 Feb 2017

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

danez picture danez on 16 Feb 2017
👍4 🎉3

@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 ?

mbm-rafal picture mbm-rafal on 16 Feb 2017

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.

danez picture danez on 16 Feb 2017

i use "webpack.config.babel.js" as config name

should i use loader in config to make jsx working?

because i've got

You may need an appropriate loader to handle this file type.

<h1>hello kitty</h1>

webpack.config.babel.js

import Path from 'path'

import HtmlWebpackPlugin from 'html-webpack-plugin'

const OUTPUT_PATH = Path.resolve('./')

export default {
  entry: './src',

  output: {
    path: `${OUTPUT_PATH}/dist`,
    filename: 'bundle.js'
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack2 starter'
    }),
  ]
}

.babelrc

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

package.json

{
  "name": "webpack2-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-latest": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "faker": "^3.1.0",
    "lodash": "^4.17.4",
    "material-ui": "^0.17.1",
    "react": "^15.4.2",
    "react-router-dom": "^4.0.0"
  }
}
crapthings picture crapthings on 27 Mar 2017

@danez your comment helped a ton, I had a brain fart...https://github.com/gabrielcsapo/tap-html/commit/055847715b5632ec38a84b9a8772e3b1f14698ab thank you 😄

gabrielcsapo picture gabrielcsapo on 28 Jun 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

pingfengafei picture pingfengafei  ·  3Comments
mingxian picture mingxian  ·  5Comments
metalex9 picture metalex9  ·  5Comments
sbussetti picture sbussetti  ·  4Comments
EvHaus picture EvHaus  ·  6Comments