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

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"]          }        }      ]    }  ]},

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-devnpm install babel-preset-env --save-dev

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

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