10

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?
Amaimersion
  • 787
  • 15
  • 28
  • 2
    Does it work if you rename your config file to just `webpack.config.babel.js`? – laggingreflex May 23 '18 at 17:52
  • You also need to install `babel-preset-es2015`, `babel-loader` isn't enough. – laggingreflex May 23 '18 at 17:53
  • @laggingreflex 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. – Amaimersion May 23 '18 at 18:05
  • I think you use babel-preset-env *instead* of babel-preset-es2015, but I'm don't think that's causing your problem. – Kevin May 23 '18 at 18:10
  • @Kevin i tried use these things separately. It doesn't work. – Amaimersion May 23 '18 at 18:17
  • See these threads: https://github.com/webpack/webpack/issues/1403#issuecomment-136333170 https://stackoverflow.com/questions/31903692/how-can-i-use-es6-in-webpack-config-js/31906902#31906902 – laggingreflex May 23 '18 at 18:32
  • 1
    Possible duplicate of [How can I use ES6 in webpack.config.js?](https://stackoverflow.com/questions/31903692/how-can-i-use-es6-in-webpack-config-js) – laggingreflex May 23 '18 at 18:32
  • https://stackoverflow.com/questions/31903692/how-can-i-use-es6-in-webpack-config-js – PlayMa256 May 23 '18 at 18:50
  • @laggingreflex 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... – Amaimersion May 23 '18 at 19:03
  • https://v4.webpack.js.org/configuration/configuration-languages/#babel-and-jsx I think your missing `npm:babel-register` – Aluan Haddad Jun 12 '23 at 22:35

1 Answers1

-10

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.

Ilan Schemoul
  • 1,461
  • 12
  • 17
Kevin
  • 359
  • 2
  • 7
  • 22
  • 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. – Amaimersion May 23 '18 at 17:26
  • 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. – Kevin May 23 '18 at 17:29
  • 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. – Amaimersion May 23 '18 at 17:36
  • 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. – Kevin May 23 '18 at 17:47
  • 2
    You can use `import` if you name your file `webpack.config.babel.js`; webpack will run babel on the config file. – laggingreflex May 23 '18 at 17:50
  • @Kevin i understood you. But I saw that others use ES6 import in webpack config files. – Amaimersion May 23 '18 at 18:08
  • Cool. According to @laggingreflex it can be done. I never bothered. I'm not sure what the advantage is, other than people think ES6 is "cooler". – Kevin May 23 '18 at 18:09
  • @Kevin 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. – Amaimersion May 23 '18 at 18:13
  • 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. – Kevin May 23 '18 at 19:35
  • You can use ES6 like this boilerplate: https://github.com/react-bootstrap/react-router-bootstrap – sol404 Feb 22 '19 at 13:51