[Bug]: Cannot use 'import.meta' outside a module in production mode

[cjnoname]

System Info

System: OS: macOS 14.6 CPU: (10) arm64 Apple M1 Max Memory: 4.32 GB / 64.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node Yarn: 1.22.22 - ~/Projects/apra-amcos-codebase-v2-frontend/node_modules/.bin/yarn npm: 10.8.2 - ~/.nvm/versions/node/v20.15.1/bin/npm Browsers: Chrome: 127.0.6533.89 Safari: 17.6

Details

Hi,

I got an error when compiling in production mode with ESM enabled.

experiments: { outputModule: true },

Not sure why.

Thanks

Reproduce link

No response

Reproduce Steps

Here is my config file.

import path from "path"; import rspack from "@rspack/core"; // import { sentryWebpackPlugin } from "@sentry/webpack-plugin"; import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin"; import { CleanWebpackPlugin } from "clean-webpack-plugin"; import Dotenv from "dotenv-webpack"; import NodePolyfillPlugin from "node-polyfill-webpack-plugin"; import ESLintPlugin from "eslint-webpack-plugin"; import RefreshPlugin from "@rspack/plugin-react-refresh";

const moduleFederationPlugin = new rspack.container.ModuleFederationPlugin({ name: "container" });

const resolve = { extensions: [".js", ".jsx", ".ts", ".tsx"], tsConfig: { configFile: "./tsconfig.json" }, alias: { src: path.resolve(import.meta.dirname, "src"), public: path.resolve(import.meta.dirname, "public") } };

const sharedLoaders = (isDev, isServer) => [ { test: /.tsx?$/, use: [ { loader: "builtin:swc-loader", options: { jsc: { parser: { syntax: "typescript", tsx: true }, transform: { react: { runtime: "automatic", development: isDev, refresh: isDev } } }, env: { targets: ["chrome >= 87", "edge >= 88", "firefox >= 78", "safari >= 12"] } } } ] }, { test: /.svg$/, use: [ { loader: "@svgr/webpack", options: { svgoConfig: { plugins: [ { name: "preset-default", params: { overrides: { removeViewBox: false } } } ] } } } ] }, { test: /.(png|jpg|gif|ico)$/, type: "asset", generator: { filename: "images/[name]-[hash:8][ext]", emit: isServer ? false : true }, parser: { dataUrlCondition: { maxSize: 10 * 1024 } } } ];

const sharedProductionPlugins = [ new NodePolyfillPlugin(), new CleanWebpackPlugin(), new Dotenv(), new rspack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] }) ];

const getClientConfig = (isDev) => { const clientConfig = { mode: isDev ? "development" : "production", stats: { modules: false, performance: false }, resolve, experiments: { outputModule: true }, optimization: { minimize: false, minimizer: [new rspack.SwcJsMinimizerRspackPlugin({})] }, entry: { client: "./src/client/index.tsx" }, devtool: "source-map", module: { rules: [ ...sharedLoaders(isDev), { test: /.css$/, use: ["style-loader", "css-loader"] } ] }, output: { filename: isDev ? "[name].js" : "[name].[contenthash].js", path: path.join(import.meta.dirname, "dist", "static"), publicPath: isDev ? "/" : undefined }, plugins: [...sharedProductionPlugins, moduleFederationPlugin], performance: { hints: false } };

if (isDev) { clientConfig.devServer = { hot: true, static: { directory: path.resolve(import.meta.dirname, "public") }, port: 4000, historyApiFallback: true, open: true }; clientConfig.plugins.push( new ForkTsCheckerWebpackPlugin(), new ESLintPlugin({ extensions: ["ts", "tsx"], exclude: ["node_modules"] }), new RefreshPlugin() ); } else { clientConfig.optimization = { splitChunks: { chunks: "all", minSize: 512000, maxSize: 1024000, minChunks: 1, maxAsyncRequests: 30, maxInitialRequests: 30, automaticNameDelimiter: "~", cacheGroups: { default: { minChunks: 1, priority: -20, reuseExistingChunk: true } } } }; if (process.env.STAGE) { // clientConfig.plugins.push( // sentryWebpackPlugin({ // org: process.env.SENTRY_ORG, // project: process.env.PROJECT_NAME, // authToken: process.env.SENTRY_AUTH_TOKEN, // telemetry: false, // sourcemaps: { // assets: "../../dist/static" // }, // release: { // deploy: { // env: process.env.STAGE.toUpperCase() // } // } // }) // ); } } return clientConfig; };

const serverConfig = { mode: "production", experiments: { outputModule: true }, ignoreWarnings: [/^(?!CriticalDependenciesWarning$)/, (warning) => true], stats: { modules: false, errorDetails: true }, optimization: { minimize: true, minimizer: [new rspack.SwcJsMinimizerRspackPlugin({})] }, devtool: "source-map", target: "node", resolve: { ...resolve, mainFields: ["main", "module"] }, entry: { index: "./src/server/index.ts", lambda: "./src/server/lambda.ts" }, module: { rules: [ ...sharedLoaders(false, true), { test: /.css$/, use: [ { loader: rspack.CssExtractRspackPlugin.loader, options: { publicPath: "./public" } }, "css-loader" ], type: "javascript/auto" } ] }, output: { filename: "[name].mjs", path: path.join(import.meta.dirname, "dist"), chunkFormat: "module", chunkLoading: "import", library: { type: "module" } }, plugins: [ ...sharedProductionPlugins, new rspack.CssExtractRspackPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ] };

export default (environment, argv) => { const isDev = argv.mode !== "production"; const clientConfig = getClientConfig(isDev);

if (isDev) { return clientConfig; }

return [clientConfig, serverConfig]; };