`Unexpected token import` in `webpack.config.babel.js` when using `{modules: false}`

Question

I have a React project which uses Webpack as the module bundler, and babel-loader to transform it into ES5, using the following settings:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader"
        }
      ]
    }
  ]
},

The options are set in a stand-alone .babelrc file.

Babel 6.13.0 supports ECMAScript modules, which means ECMAScript modules doesn't need to be transformed into CommonJS modules first. To get this behaviour, the documentation says that we should use this setting in our .babelrc.

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

However, when I try to run Webpack using this setting, it comes back with the error:

$ ./node_modules/.bin/webpack
/home/d4nyll/foo/bar/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack from 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import

I'm guessing this is because babel-loader doesn't act on webpack.config.babel.js, and so it's not recognising the import keyword. The error does not appear when { "modules": false } is removed, but I want that functionality. How can I get Babel to recognise webpack.config.babel.js?

score 19 · Accepted Answer · answered Jan 22 '17 at 11:08

19

The following worked for me.

Set .babelrc to the following:

{
  "presets": ["es2015"]
}

The .babelrc settings would apply to the webpack.config.babel.js file.

Next, change the Webpack configuration to include the options you want applied to your application code.

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            "presets": [["es2015", {"modules": false}], "react"]
          }
        }
      ]
    }
  ]
},

answered Jan 22 '17 at 11:08

d4nyll

11,811
6
54
68

The settings in your webpack config will be overridden by your .babelrc file unless you set `babelrc: false` – yujingz Apr 24 '17 at 17:44
@yujingz That doesn't seem to be the case, I just got this working 100% without that – Andrew Li Jul 04 '17 at 04:09
You will get the same error if you run `webpack --config ./webpack.config.babel`, to fix it run `webpack --config ./webpack.config.babel.js` You need to add 'js' to the config file – Anenth Aug 19 '17 at 13:03
2

@d4nyll the `env` preset is recommended by Babel over all others – griest Nov 13 '17 at 23:21

Frank N · Answer 2 · 2018-01-31T10:42:22.680

Just to emphasize, as you probably know: Your error

`Unexpected token import` in `webpack.config.babel.js`...

has nothing to do with the thing you are building, solely with your webpack.config.babel.js. Despite its name, ES6 is not gonna work without a few things made sure.

Things to make sure:

1) you don't need any webpack.config.js, when you have a webpack.config.babel.js in your project.

2) make sure in your package.json, you are on Webpack Version 3 or higher for (1) to hold true

3) make sure you have a .babelrc containing at least env or es2015

{ "presets": ["env"] }

4) make sure to have the following two installed

npm install babel-cli --save-dev
npm install babel-preset-env --save-dev

Respectively babel-preset-es2015 depending on your .babelrc. (read here why env is arguably a bit cooler.)

score 1 · Answer 3 · answered Oct 25 '17 at 07:14

1

If you are using Webpack 2.6+ where import is baked in, make sure you use this babel plugin: https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import

answered Oct 25 '17 at 07:14

publicJorn

2,404
1
20
30

sapy · Answer 4 · 2017-08-13T12:30:52.893

You have created a webpack.config.js and when tying to execute webpack you are getting above error. Cause your webpack config file need to be babelified before you can use it,

1) Rename your webpack.config.js to webpack.config.babel.js.

2) Now create a new file webpack.config.js with just the following 2 lines

require('babel-register');
module.exports = require('./webpack.config.babel.js');

3) create a .babelrc file in parallel to your webpack.config.js file with following content. We need to tell babel explicitly what preset to use.

{
  "presets": ["latest",'react', 'es2015','stage-2']
}

4) add following node modules to your dependency ( Required for presets used in .babelrc)

npm install babel-preset-env babel-preset-es2015 babel-preset-stage-2 babel-preset-latest babel-preset-react --save-dev

5) You are done . Now if you execute webpack --progress --colors --watch it should work.

ad 2) No `webpack.config.js` is needed (not even as a stub), if a `webpack.babel.config.js` is around. [See here[(https://stackoverflow.com/questions/46239512/how-come-webpack-directly-imports-webpack-config-babel-js/46276592#46276592) The `.babelrc` indeed is required (if you want to put ES6 into that file, which is the whole reason behind it...). — Frank N, Sep 21 '17 at 09:43

`Unexpected token import` in `webpack.config.babel.js` when using `{modules: false}`

4 Answers4

Things to make sure:

Linked