Babel 7 not being executed on webpack.config.babel.js

What is the current behavior?

Executing webpack with a ES6+ config file (webpack.config.babel.js) whilst using Babel 7 leads to a SyntaxError being reported e.g.

$ webpack --env.production
<OMITTED>/webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import path from 'path'
                                                              ^^^^^^

SyntaxError: Unexpected token import

If the current behavior is a bug, please provide the steps to reproduce.

  1. Install the latest webpack and the latest @babel/core & @babel/preset-env (e.g 7.0.0-beta.32)

  2. Create a webpack.config.babel.js with ES6+ syntax e.g.

    echo "import path from 'path'" > webpack.config.babel.js
    

    Note: For illustrative purposes only, this obviously doesn’t produce a valid webpack config, but it’s sufficient to recreate the issue.

  3. Create a .babelrc with the env preset:

    echo "{\"presets\":[\"@babel/env\"]}" > ./.babelrc
    
  4. Run webpack e.g.

    webpack
    

What is the expected behavior?

Babel to to be executed on webpack.config.babel.js before Node executes the file.

Following the steps above you’re expecting a webpack specific error regarding an invalid configuration:

<OMITTED>/node_modules/webpack/bin/convert-argv.js:507
				throw new Error("'output.filename' is required, either in config file or as --output-filename");

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

webpack: 3.8.1
@babel/core: 7.0.0-beta.32
@babel/preset-env: 7.0.0-beta.32

What I’m assuming is happening is that Webpack is looking for the presence of a babel-core package, can’t find it, so proceeds without using babel. Babel 7 has scoped packages, the new package is @babel/core.

Author: Fantashit

8 thoughts on “Babel 7 not being executed on webpack.config.babel.js

  1. Another workaround when using the CLI.

    Create a webpack.config.js file which calls babel register and your webpack.config.babel.js

  2. yup!

    I just now managed to get it working though, with an extra install of @babel/register. So this is my setup now:

    package.json

    "dependencies": {
      "@babel/core": "^7.1.2",
      "@babel/preset-env": "^7.1.0",
      "@babel/register": "^7.0.0",
      ...
      "webpack": "^4.20.2",
    },
    

    .babelrc

    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "useBuiltIns": "usage",
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
    

    webpack.config.babel.js

    import { xyz } from 'xyz';
    ...
    

Comments are closed.