ERROR in index.js from Terser plugin "Export" statement may only appear at the top level

[KeshavHeda]

We are working on creating 2 applications for our project. Project 1 for UI application and Project 2 containing react components which can be used in other project.
My Project 2 configuration is currently shown below.
When running webpackbuild, terser plugin is giving below error. I have searched many answers but none of them are helping me. Can someone point me where I am doing wrong configuration?

The code is present in "https://github.com/KeshavHeda/issueReproduce"

**ERROR in index.bundle.js
index.bundle.js from Terser plugin
"Export" statement may only appear at the top level [index.bundle.js:24,9]
at js_error (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:549:11)
at TreeWalker.visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:11766:13)
at TreeWalker._visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6717:24)
at AST_Export._walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:5191:28)
at walk_body (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3876:17)
at AST_Arrow. (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:4375:17)
at C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6718:21
at TreeWalker.visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:11668:13)
at TreeWalker._visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6717:24)
at AST_Arrow._walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:4369:28)
at AST_Array. (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:5598:29)
at TreeWalker._visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6721:21)
at AST_Array._walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:5595:24)
at AST_Call. (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:5254:29)
at TreeWalker._visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6721:21)
at AST_Call._walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:5251:28)
at AST_SimpleStatement. (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3865:23)
at TreeWalker._visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6721:21)
at AST_SimpleStatement._walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3864:24)
at walk_body (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3876:17)
at AST_Toplevel. (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3905:13)
at C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6718:21
at TreeWalker.visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:11668:13)
at TreeWalker._visit (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:6717:24)
at AST_Toplevel._walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3904:24)
at AST_Toplevel.walk (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:3804:21)
at AST_Toplevel.figure_out_scope (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:11780:10)
at Compressor.compress (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:18547:28)
at minify (C:\workproject\SAP-Term-Comp-Header\node_modules\terser\dist\bundle.min.js:30733:12)
at terserMinify (C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\utils.js:247:24)
at minify (C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\minify.js:22:10)
at C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\index.js:450:100
at next (C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\utils.js:63:7)
at Array.forEach ()
at C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\utils.js:65:26
at new Promise ()
at throttleAll (C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\utils.js:41:10)
at TerserPlugin.optimize (C:\workproject\SAP-Term-Comp-Header\node_modules\terser-webpack-plugin\dist\index.js:579:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

webpack 5.89.0 compiled with 1 error in 1152 ms**

index.js ::

import React from "react";

function CompMain() {
  return (
    <div>Test text</div>
  );
};


export default CompMain;

package.json ::

{
"name": "comps",
"version": "0.0.1",
"private": true,
"type": "module",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"@babel/core": "^7.23.5",
"@babel/plugin-transform-runtime": "^7.23.6",
"@babel/preset-env": "^7.23.5",
"@babel/preset-react": "^7.23.3",
"babel-loader": "^9.1.3",
"copy-webpack-plugin": "^11.0.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.4",
"url-loader": "^4.1.1",
"webpack": "^5.89.0",
"webpack-bundle-analyzer": "^4.10.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
},
"scripts": {
"reactbuild": "react-scripts build",
"webpackbuild": "webpack --config webpack.config.js"
},
}

webpack.config.js ::

import { join, resolve, dirname } from "path";
import { fileURLToPath } from 'node:url';
import TerserWebpackPlugin from "terser-webpack-plugin";
import CopyPlugin from "copy-webpack-plugin";

export default function (_env, argv) {
    const isProduction = argv.mode === "production";
    const __dirname = dirname(fileURLToPath(import.meta.url));

    return {
        entry: {
            index: join(__dirname, "src", "index.js"),
        },
        mode: "production",
        experiments: {
            outputModule: true,
          },
        output: {
            asyncChunks: false,
            charset: true,
            libraryTarget: 'module',
            globalObject: 'this',
            path: resolve(__dirname, "dist"),
            filename: "[name].bundle.js",
            chunkFilename: "[name].chunk.js",
        },
        module: {
            rules: [
                {
                    test: /\.?js$/i,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            cacheDirectory: false,
                            cacheCompression: false,
                            envName: "production"
                        }
                    }
                },
                {
                    test: /\.css$/,
                    use: [
                        isProduction ? MiniCssExtractPlugin.loader : "style-loader",
                        "css-loader"
                    ]
                },
                {
                    test: /\.(png|jp(e*)g|gif)$/i,
                    use: {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            name: "[name].[ext]"
                        }
                    }
                },
                {
                    test: /\.svg$/,
                    use: ["@svgr/webpack"]
                },
                {
                    test: /\.(eot|otf|ttf|woff|woff2)$/,
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]"
                    }
                },
            ]
        },
        resolve: {
            extensions: [".js", ".mjs", ".cjs", ".jsx"]
        },
        plugins: [
            isProduction &&
            new MiniCssExtractPlugin({
                filename: "[name].css"
            }),
        optimization: {
            minimize: true,
            minimizer: [
                new TerserWebpackPlugin({
                    test: /\.?js$/i,
                    exclude: /node_modules/,
                    parallel: false,
                    terserOptions: {
                        compress: true,
                        keep_fnames: true,
                        mangle: true,
                        module: false,
                        nameCache: false,
                        output: {
                            comments: false,
                            ascii_only: true
                        },
                    }
                }),
            ],
            splitChunks: {
                chunks: "all",
                minSize: 0,
                maxInitialRequests: 20,
                maxAsyncRequests: 20
            },
            runtimeChunk: "single"
        },
        devServer: {
            compress: true,
            historyApiFallback: true,
            open: true,
            overlay: true
        }
    };
};

babel.config.js ::

export default function (api) {
    api.cache(false);

    const presets = [
    [
        "@babel/preset-env",
        {
            "modules": "auto",
            "targets": {
                "node": "current"
            }
        }
    ], 
    ["@babel/preset-react", 
        {
            "pragma": "dom",
            "pragmaFrag": "DomFrag",
            "throwIfNamespace": false,
            "runtime": "classic"
        }
    ]
    ];
    const plugins = [
        "@babel/plugin-transform-runtime"
    ];
    return {
        presets,
        plugins
    };
}

[alexander-akait]

Hello, can you put this in github repo and provide a link? Thank you

[marchaos]

Seeing the same. Seems to be due to runtimeChunk: 'single'. If you remove that, there's no error.

[alexander-akait]

Just remove libraryTarget: 'module', you don't build library, it is an application

[alexander-akait]

If you want to output ES modules please use target: ["es2020", "web"],, otherwise webpack doesn't know about your env, by default it is just web and so we don't know about supporting of import ... from ... and import() syntax

[KeshavHeda]

Hi Alex, I tried your suggestion and used target: ["es2020", "web"] while removing libraryTarget: 'module'. The import in main application fails with this error **export 'myHeader' (imported as 'myHeader') was not found in '../../node_modules/myheader/dist/main.js' (module has no exports)**. My package.json contains "name": "nodeheader" while my index.js contains export default MyHeader;

[alexander-akait]

@KeshavHeda Sorry for delay, I can't reproduce the problem using your repo, can you provide steps?