Top Level await parsing failes

[tsClauz]

Bug report

Enabling experiments.topLevelAwait and using the @babel/plugin-syntax-top-level-await for parsing .jsx files does not work, and throws error Error: Top-level-await is only supported in EcmaScript Modules

What is the current behavior?
With this config:

module.exports = {
    mode: 'production', 
    entry: /* entries object, containing the .jsx files*/,
    output: { 
        path: path.resolve(__dirname, `public/__js`),
        filename: '[name].js',
    }, 
    module: {
        rules: [{ 
            test: /(\.jsx|\.js)$/, 
            include: path.resolve(__dirname, `src`),
            use: { 
                loader: 'babel-loader', 
                options: {
                    presets: ["@babel/preset-react", "@babel/preset-env"],
                    plugins: ["@babel/plugin-syntax-top-level-await"]
                }
            }
        },
       ]
    }, 
    resolve: { 
        modules: [__dirname + '/node_modules'], 
        extensions: ['.jsx', '.js'], 
    },
    experiments: {
        futureDefaults: true,
        topLevelAwait: true 
    },
    optimization: {
        mergeDuplicateChunks: true,
    }
}

using top-level await in the code throws an error

If the current behavior is a bug, please provide the steps to reproduce.
Since experiments.topLevelAwait is enabled, and the babel plugins are enabled, the error shouldn't appear

What is the expected behavior?
Webpack should not throw the Error: Top-level-await is only supported in EcmaScript Modules error and compile the files successfully

Other relevant information:
webpack version: 5.72.1
Node.js version: 18.2.0
Operating System: Debian 10
Additional tools:

[tsClauz]

Well I can say I solved the issue now, but with an unexpected outcome:
I noticed that the error was occurring only in files which did not have an import statement, so I went ahead and imported some random package in every file and now the error is gone. Still think that's a bug tho

[arthurdandrea]

Webpack by default considers a file without import or export statements to be commonjs module not EcmaScript Module.
You already found a way to mark each file individually, I recommend using export {}; because it's shorter.
Another way would be to set type: "javascript/esm" to your rule like so:

module.exports = {
    mode: 'production', 
    entry: /* entries object, containing the .jsx files*/,
    output: { 
        path: path.resolve(__dirname, `public/__js`),
        filename: '[name].js',
    }, 
    module: {
        rules: [{ 
            test: /(\.jsx|\.js)$/, 
            include: path.resolve(__dirname, `src`),
            type: "javascript/esm",
            use: { 

Beware, to set type: "javascript/esm" will, among other things, break any usage of CommonJS' require in those modules.

[alexander-akait]

Yes, we considered to remove "javascript/auto" for webpck v5, but it will be big breaking change for developers, so we decide to postpone it

[vankop]

answered by @arthurdandrea 👍

[Jack-Works]

if it is inside a "type": "module" package.json, I believe it effectively is a ES Module