Babel-loader: Problems with module parsing using babel-loader

[Lonelind]

Just updated all dependencies and babel as well. And caught an error while compiling:

ERROR in ./index.jsx
Module parse failed: /Users/lonelind/Projects/myProject/node_modules/react-hot-loader/index.js!/Users/lonelind/Projects/myProject/node_modules/babel-loader/index.js?presets[]=react&presets[]=stage-0!/Users/lonelind/Projects/myProject/index.jsx Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
| // import 'babel/polyfill';
| 
| import React from 'react';
| import { render } from 'react-dom';
| 

I commented polyfill import, but this doesn't work. index.jsx file is an entry point of my project.

This is my webpack dev config:

module.exports = {
    devtool: 'source-map',

    /* ... */
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loaders: [
                    'react-hot-loader',
                    'babel?presets[]=react&presets[]=stage-0',
                ]
            }
        ]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

All my es6/7 files are with .jsx extension to lint them separately from es5 files. Pattern /\.jsx?$/ doesn't help though.

[alexnofoget]

I have the same problem.
See solution here http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/

[davidrunger]

Thanks @alexnofoget, this solved my issue.

Specifically, what I needed in my case (I'm not using React) was

npm install babel-preset-es2015 --save-dev

and

// webpack.config.js

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.es6\.js$/, loader: "babel-loader",
        query: {
          presets: ['es2015']
        }
      },
      ...
    ]
  }
  ...
  resolve: {
    extensions: [..., '.es6.js', ...]
  }
};

[Lonelind]

Thanks, I made everything to make it work. And... I'm using @-notated decorators for my classes and they doesn't work with babel itself for now. And I was forced to roll back babel updates to latest 5.x.

[aneurysmjs]

yeap, I having the same problem when using babel6 with arrow functions

ERROR in ./components/index.js
Module parse failed: /home/blackend/WebstormProjects/angular_with_webpack/node_modules/babel-loader/index.js!/home/blackend/WebstormProjects/angular_with_webpack/app/components/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| export default (ngModule => {
|    require('./jentoo/jentoo.component')(ngModule);
| })
 @ ./index.js 4:0-23

[Couto]

@blackendstudios that error usually means that something is missing. Could you share your webpack.config.js and package.json ?

[aneurysmjs]

@Couto well, that issue was fix by adding a .babelrc

but I've found other bug that it has to see with babel, is on webpack but relies on babel so Im going to share the link an open a issue

https://github.com/webpack/webpack/issues/1877

[FractalizeR]

I have the same issue and .babelrc doesn't seem to solve this problem....

[Shinobi881]

I got it working:

• .babelrc in the root directory
• add { "presets": ["es2015"] } to .babelrc
• npm i babel-preset-es2015 -D
• webpack

[wikieswan]

+1 ,thx to @Shinobi881 D:)

[jpcodr]

hi i have some troubles with this
i wrote my code in es6 with umd definition and trying to run webpack with karma test runner using karma-webpack

// myModule.es6.js
((root, factory) => {
  if (typeof define === 'function' && define.amd) 
    define([], factory);
  else if (typeof module === 'object' && module.exports)
    module.exports = factory();
  else
    root.myModule = factory();
}(this, () => {
  return {};
}));

and still getting error Module build failed: SyntaxError: myModule.es6.js Unexpected token (8:1) and seems to be at arrow function declaration. i added babel-plugin-transform-es2015-arrow-functions without success

this my karma.conf.js

const path = require('path');
const RewireWebpackPlugin = require('rewire-webpack');

const webpackConfig = {
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                exclude: [
                    path.resolve(__dirname, 'node_modules')
                ],
                test: /\.js$/,
                query: {
                    plugins: ['transform-runtime', 'transform-es2015-arrow-functions'],
                    presets: ['es2015']
                }
            }
        ]
    },
    plugins: [new RewireWebpackPlugin()]
};

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'chai-as-promised', 'sinon-chai'],
    files: ['src/test/**/*.js'],
    preprocessors: {
        'src/test/**/*.spec.js': ['webpack']
    },
    reporters: ['mocha'],
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    webpack: webpackConfig,
  });
};

also added a .babelrc

{
  "presets": ["es2015"],
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-es2015-classes",
    "transform-es2015-destructuring",
    "transform-es2015-modules-commonjs",
    "transform-es2015-object-super",
    "transform-class-properties",
    "transform-decorators-legacy"
  ]
}

but doesn't work, anyone can help me ?

[samirshah1187]

can someone please help me with this issue?

http://stackoverflow.com/questions/37537350/webpack-you-may-need-an-appropriate-loader-to-handle-this-file-type

[sidharthmehra]

@jpablom you need to add this to your babelrc file in plugins:
"plugins": [["react-transform", {
"transforms": [{
"imports": ["react"],
"locals": ["module"]
}]
}]]
This works for me. Using the es6 way of defining modules using arrow.

[elhay-av]

See this https://github.com/babel/babel/issues/5325#issuecomment-292064058
solve same issue for me.
i get this error when i'm using transform-react-inline-elements plugin in babel-loader

DOES NOT WORK:
```
"plugins": [
"transform-react-remove-prop-types",
"transform-react-constant-elements",
"transform-react-inline-elements"
]

DOES WORK:

"plugins": [
  "transform-react-remove-prop-types",
  "transform-react-inline-elements"
  "transform-react-constant-elements"
]

```