Can't use ES6 import in webpack config

Question

CommonJS import const webpack = require('webpack'); works fine, but ES6 import webpack from 'webpack'; no.

From Webpack Documentation:

Version 2 of webpack supports ES6 module syntax natively.

But it doesn't work out of the box for me.

I'm also tried:

• use babel-loader for JS files;
• add "babel" to the config files names.

But it's all doesn't work.

package.json

"scripts": {
    "build:dev": "webpack --config webpack.config.dev.babel"
},
"devDependencies": {
    "babel-loader": "^7.1.4",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-merge": "^4.1.2"
}

webpack.config.common.babel.js

export const /* in this implied like default */ module = {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: '/node_modules/'
        }
    ],
};

webpack.config.dev.babel.js

import webpack from 'webpack';
import merge from 'webpack-merge';
import commonConfig from './webpack.config.common.babel';

export default merge(commonConfig, {
    mode: 'development',
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
});

.babelrc

{
    "presets": ["es2015"]
}

And when i type npm run build:dev it's throws:

import webpack from 'webpack';
^^^^^^

SyntaxError: Unexpected token import

Questions:

1. How to make ES6 import work?
2. It is possible out of the box, i.e. without any babel-loader packages?

Tutelary

Does it work if you rename your config file to just webpack.config.babel.js? – Eason

You also need to install babel-preset-es2015, babel-loader isn't enough. – Eason

@Eason it doesn't work, if i rename to webpack.config.babel.js. I just installed these modules: "babel-cli", "babel-core", "babel-loader", "babel-preset-env", "babel-preset-es2015" and set "presets": ["es2015", "env"], but still not working. – Tutelary

I think you use babel-preset-env instead of babel-preset-es2015, but I'm don't think that's causing your problem. – Motherofpearl

@Motherofpearl i tried use these things separately. It doesn't work. – Tutelary

See these threads: github.com/webpack/webpack/issues/1403#issuecomment-136333170 #31904192 – Eason

Possible duplicate of How can I use ES6 in webpack.config.js? – Eason

#31904192 – Ossiferous

@Eason I tried to use all of these methods and wrote about some here. And I looked these resources before and none of this solved my problem. It seems much easier to use CommonJS... – Tutelary

v4.webpack.js.org/configuration/configuration-languages/… I think your missing npm:babel-register – Weakfish

Answer 1

For any users that stumble upon this post 2023, Webpack 5 now supports ES6 natively.

To enable ES6 imports in webpack.config.js, add the

"type": "module",

option at the main level of your package.json file configuration.

Embody

Answer 2

Well, the first thing I notice is that you can't use "import" in your webpack file. You need "require":

  const webpack = require('webpack');

You cannot use import because that is ES6, and how can you use ES6 if you haven't installed babel yet? No JS engine (afaik) natively supports ES6, and definitely not Node.

Also, I think you're going to get a warning for the ES2015 - I think it should be "babel-preset-env" now.

Motherofpearl

I pointed on the Webpack Documentation: "Version 2 of webpack supports ES6 module syntax natively." >natively. Almost full quote: "Version 2 of webpack supports ES6 module syntax natively, meaning you can use import and export without a tool like babel to handle this for you." >you can use import without a tool. – Tutelary

Yes, but does that mean that you can do it always, or once webpack is installed, only with the files with which webpack is dealing? I think it's the latter. How is webpack going to help Node deal with ES6 if webpack isn't loaded yet? It's a chicken and egg thing. You have to use ES5 in the webpack config files. For your apps source files, it's fine. – Motherofpearl

Maybe i don't understand a little, but webpack is loaded and he dealing with the files. I mean, webpack handles the files, not Node. Even if so, as you said, then I already tried babel-loader for handling ES6 files. It doesn't work. – Tutelary

Yes, but when that import is called, webpack isn't running yet. Webpack can't handle instantiating itself. A pen can't write on itself. I'm certainly no expert here, but this just makes logical sense. Webpack can't be transpiling ES6 before webpack is up and running. Just think through the process here. – Motherofpearl

You can use import if you name your file webpack.config.babel.js; webpack will run babel on the config file. – Eason

@Motherofpearl i understood you. But I saw that others use ES6 import in webpack config files. – Tutelary

Cool. According to @Eason it can be done. I never bothered. I'm not sure what the advantage is, other than people think ES6 is "cooler". – Motherofpearl

@Motherofpearl No, it doesn't work. The advantage is that it is modern (relative to CommonJS). Why we should use old technologies instead new one? It's irrational. – Tutelary

I love ES6. It has a lot of nice features. But for something simple like setting up a config file, I don't see the need. – Motherofpearl

You can use ES6 like this boilerplate: github.com/react-bootstrap/react-router-bootstrap – Gongorism