Unexpected token 'export' using webpack.config.babel.js with Webpack CLI v5

Question

Unexpected token 'export' using webpack.config.babel.js with Webpack CLI v5

yvele opened this issue 2 years ago · 17 comments

Describe the bug

The following webpack.config.babel.js works with Webpack CLI v4 but fails with v5:

import config from "./webpack/config"; // <---- exports fails with v5 (works with v4)
import path from "path";

export default {
  entry : "./src/main.js",
  output : {
    path : path.resolve(__dirname, config.dist),
    filename : "main.js"
  }
};

The error:

> webpack-cli-repro-babel@1.0.0 build
> webpack

[webpack-cli] Failed to load '/Users/yves/Projects/OSS/webpack-cli-repro-babel/webpack.config.babel.js' config
[webpack-cli] /Users/yves/Projects/OSS/webpack-cli-repro-babel/webpack/config.js:4
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._compile (/Users/yves/Projects/OSS/webpack-cli-repro-babel/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Object.newLoader [as .js] (/Users/yves/Projects/OSS/webpack-cli-repro-babel/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Function.Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)

Full repo repo: https://github.com/yvele/webpack-cli-repro-babel

What is the current behavior?

I've created a minimal bug repo repository that works fine with Webpack CLI v4 but fails with v5:
https://github.com/yvele/webpack-cli-repro-babel

To Reproduce

Steps to reproduce the behavior:
https://github.com/yvele/webpack-cli-repro-babel#build

Expected behavior

webpack.config.babel.js should be handled by Babel all the import way down. Same behaviour than Webpack CLI v4.

Screenshots

N/A

Please paste the results of npx webpack-cli info here, and mention other relevant information

Additional context

I'm using Node.js v18.12.1 and the following dependencies:

"devDependencies": {
  "@babel/core": "^7.20.7",
  "@babel/preset-env": "^7.20.2",
  "@babel/register": "^7.18.9",
  "webpack": "^5.75.0",
  "webpack-cli": "^5.0.1"
}

Answer 1 · 2023-01-04T06:10:00.000Z

I'll check this.

Answer 2 · 2023-01-06T10:50:15.000Z

@snitin315 do you maybe have any idea of a workaround? 🤔

Answer 3 · 2023-01-14T18:11:34.000Z

Try renaming your config to a .mjs extention

Answer 4 · 2023-01-15T20:12:35.000Z

Have you tried naming your config webpack.babel.config.js too?

Answer 5 · 2023-01-19T05:03:57.000Z

Same issue. None of the breaking changes seem applicable.

I don't want to start mucking around with .mjs files to fix this - they've given me so many headaches in the past.

Our config name is webpack.config.renderer.dev.babel.js. Is our placement of babel okay, or are there some strict rules about how to name the files for Babel transpilation?

Answer 6 · 2023-01-19T14:40:47.000Z

Try renaming your config to a .mjs extention

Webpack cannot find the name

Have you tried naming your config webpack.babel.config.js too?

Hum.. this file name is not supported by Webpack 🤔 but I still tried and Webpack cannot find it:

Module not found: Error: Can't resolve './src' in '/Users/yves/Projects/OSS/webpack-cli-repro-babel'
resolve './src' in '/Users/yves/Projects/OSS/webpack-cli-repro-babel'
  using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src.wasm doesn't exist
      as directory
        existing directory /Users/yves/Projects/OSS/webpack-cli-repro-babel/src
          using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: ./src)
            using path: /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index
              using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index.wasm doesn't exist

@evenstensberg are you suggesting me random things? 🤔 🤓

Answer 7 · 2023-01-20T02:08:22.000Z

We recently upgraded interpret to v3 in #3437.

Support .babel.(jsx|tsx) extensions (1e3d0f8)

I believe it's related. I can see this in the CHANGELOG.

Answer 8 · 2023-01-23T10:03:41.000Z

We recently upgraded interpret to v3 in #3437.

Support .babel.(jsx|tsx) extensions (1e3d0f8)

I believe it's related. I can see this in the CHANGELOG.

@snitin315 Do we need to make an interpret issue? I don't fully understand why this commit is making Babel not to interpret imported files 🤔

Answer 9 · 2023-01-27T20:55:32.000Z

Try renaming your config to a .mjs extention

Webpack cannot find the name

Have you tried naming your config webpack.babel.config.js too?

Hum.. this file name is not supported by Webpack 🤔 but I still tried and Webpack cannot find it:

Module not found: Error: Can't resolve './src' in '/Users/yves/Projects/OSS/webpack-cli-repro-babel'
resolve './src' in '/Users/yves/Projects/OSS/webpack-cli-repro-babel'
  using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/yves/Projects/OSS/webpack-cli-repro-babel/src.wasm doesn't exist
      as directory
        existing directory /Users/yves/Projects/OSS/webpack-cli-repro-babel/src
          using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: ./src)
            using path: /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index
              using description file: /Users/yves/Projects/OSS/webpack-cli-repro-babel/package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  /Users/yves/Projects/OSS/webpack-cli-repro-babel/src/index.wasm doesn't exist

@evenstensberg are you suggesting me random things? 🤔 🤓

No, I just wanted to find out if some extentions or prefixes were changed without having to run the repro :D Sorry!

Answer 10 · 2023-03-01T08:07:28.000Z

Hey if it's still not solved just change config.js to
module.exports = { dist: "dist", };.

instead of
export default { }
Cause I think Webpack v5 doesn't support exports in config file

Answer 11 · 2023-03-12T19:03:44.000Z

Sorry for delay, I think you don't undestand how a register works, if you have webpack.config.babel.js, you need to import config.babel.js, not config.js, because register can't undestand what is ESM and what is non ESM, so don't transpile files, we are using interpret + rechoir under the hood to transpile files.

Why it works before - let's look at changelog of interpret - https://github.com/gulpjs/interpret/releases/tag/v3.0.0

Ensure babel only transforms files that match the full extension

So @babel/register will work only for .babel.js files if your root file has the .babel.js extension.

The question - why it was done by interpret team?

The answer is simple - for performance reasons. Previously, if you had a .babel.js root file extension, all import/require were processed by @babel/register, and if there are many, performance will degrade - remember that babel is not as fast as you want.

So again, the solution is to add the .babel.js extension to all imported files that contain pseudo ESM (or need to be transpiled for any other reason). Sorry, we don't want to restore the previous behavior, and that's only possible if we downgrade our dependecy, and that's not possible because new features are used a lot and this is actually the correct fix because it will potentially increase your speed.

Feel free to feedback, I will peen the issue for other developers

Answer 12 · 2023-03-17T00:25:45.000Z

So @babel/register will work only for .babel.js files if your root file has the .babel.js extension.

Is there a typo here? It goes against the rest of your comment and doesn't work.

So this change means we need to make any index.js into index.babel.js? But that can't work without writing out ./common/index.babel everywhere instead. And then every file importing some other file within a directory all need to have it added, and then all the import statements need to be updated.

It's quite a messy mess. I understand the meaningful benefits for some, but for us it's just a lot of work for nothing gained.

Answer 13 · 2023-03-17T16:44:51.000Z

It's quite a messy mess. I understand the meaningful benefits for some, but for us it's just a lot of work for nothing gained.

I undestand you, but I don't see any options to disable/configure it (we will provide them if it will be possible), maybe better ask about it interpret developers, because that's just my guess (about perf)

Answer 14 · 2024-03-05T08:37:00.000Z

So again, the solution is to add the .babel.js extension to all imported files

Is there a workaround I have complex configuration with many files. Also I'm managing multiple repositories 🤔

Were should I open an issue to make something "simple" happen?

Answer 15 · 2024-03-05T20:42:29.000Z

I wanted to find a workaround but I never did. I had to rename all of our files. Sorry to be the bearer of bad news.

Answer 16 · 2024-03-07T05:18:08.000Z

@yvele Hi, I recently encountered an issue because I'm trying to remove "type": "module" in package.json and it complains that import is not recognizable in my webpack.config.js. Could you help me confirm this is the issue you proposed here?

I'm finding a way to write ESM syntax for webpack.config.js without "type": "module" in package.json.

Answer 17 · 2024-05-25T08:49:13.000Z

package.json documentation says the below

When set to "module", the type field allows a package to specify all .js files within are ES modules. If the "type" field is omitted or set to "commonjs", all .js files are treated as CommonJS.

Therefore if "type":"module" is omitted, the webpack build js file will be treated as CommonJS and it does not support export default syntax.

However, as mentioned above, if the webpack build file extension is changed to .mjs, it works. Therefore "type":"module" needs to be provided in package.json