[Feature] Support more properties of `import.meta`

[Blankeos]

trafficstars

System Info

System: OS: macOS 14.5 CPU: (8) arm64 Apple M2 Memory: 88.97 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v20.14.0/bin/yarn npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm pnpm: 9.5.0 - ~/.nvm/versions/node/v20.14.0/bin/pnpm bun: 1.1.21 - ~/.bun/bin/bun Browsers: Chrome: 127.0.6533.73 Safari: 17.5

Details

When trying to access env vars via: process.env.PUBLIC_NICE import.meta.env.PUBLIC_NICE

And I don't have PUBLIC_NICE in my .env. It throws an error instead of just being undefined.

Afaik in Vite, I'm allowed to have optional env variables. I usually setup my config in a typescript file with default values for local like:

export const config = {
   NICE: process.env.PUBLIC_NICE ?? "my default";
};

Reproduce link

No response

Reproduce Steps

1. Make an rspack project

2. Go to App.tsx and write process.env.PUBLIC_NICE somewhere

3. Run the app (expect: error)

4. Add PUBLIC_NICE="Hello" to .env

5. Run the app (expect: no errors)

[CPunisher]

Maybe you can define an empty process.env with DefinePlugin.

https://rspack.dev/zh/plugins/webpack/define-plugin https://rsbuild.dev/config/source/define

new rspack.DefinePlugin({
  "process.env": {},
}),

[abenhamdine]

it's indeed a non documented breaking change in rspack beta 1.0.0 beta0, see https://github.com/web-infra-dev/rsbuild/issues/3029

[LingyuCoder]

Currently Rspack/Webpack does not support import.meta.env. You can use DefinePlugin and process.env instead. The previous version of Rspack would replace import.meta.env.xxxx with undefined, this may result in entering an unexpected branch without knowing.

[abenhamdine]

Currently Rspack/Webpack does not support import.meta.env. You can use DefinePlugin and process.env instead. The previous version of Rspack would replace import.meta.env.xxxx with undefined, this may result in entering an unexpected branch without knowing.

Hmm rsbuild/rspack supports import.meta.env, we use it in our code.
But since rsbuild beta 6 (rspack 1.0.0 beta 0), if the variable is not defined in the environment, import.meta.env is replaced by undefined, thus trying to access undefined.PUBLIC_MY_VARIABLE results in a error.

[LingyuCoder]

Currently Rspack/Webpack does not support import.meta.env. You can use DefinePlugin and process.env instead. The previous version of Rspack would replace import.meta.env.xxxx with undefined, this may result in entering an unexpected branch without knowing.

Hmm rsbuild/rspack supports import.meta.env, we use it in our code.
But since rsbuild beta 6 (rspack 1.0.0 beta 0), if the variable is not defined in the environment, import.meta.env is replaced by undefined, thus trying to access undefined.PUBLIC_MY_VARIABLE results in a error.

ok, we will find a better way to handle this

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[LingyuCoder]

bump

[hybrist]

It's worth noting that rspack is the outlier here: The following code will work across all runtimes and bundlers but breaks in rspack.

expect(import.meta.env?.SOME_MISSING_VAR ?? 42).toBe(42);

See "import⁠.meta.env?.X" row in https://bundlers.dev/javascript/modules/import.meta/.

[hardfist]

It's worth noting that rspack is the outlier here: The following code will work across all runtimes and bundlers but breaks in rspack.

expect(import.meta.env?.SOME_MISSING_VAR ?? 42).toBe(42); See "import⁠.meta.env?.X" row in bundlers.dev/javascript/modules/import.meta.

yeah it's a bug and we're gonna fix it

[takki2602]

I'm not quite sure if this fits here exactly but I can imagine that it is related to the same bug. When I log import.meta.env I always get undefined. Even if I get a value back with import.meta.env.test.

I have also noticed the following which irritates me and where I expect different behavior.

console.log(import.meta.env) // undefined

console.log(import.meta.env['PUBLIC_TEST']) // value
console.log(import.meta.env.PUBLIC_TEST]) // value


let x = 'PUBLIC_TEST';
console.log(import.meta.env[x])  // Cannot read properties of undefined (reading 'PUBLIC_TEST')

Perhaps this can also be taken into account.

[grvdisco]

It's worth noting that rspack is the outlier here: The following code will work across all runtimes and bundlers but breaks in rspack. expect(import.meta.env?.SOME_MISSING_VAR ?? 42).toBe(42); See "import⁠.meta.env?.X" row in bundlers.dev/javascript/modules/import.meta.

yeah it's a bug and we're gonna fix it

I was wondering if there have been any updates on this issue? 🤞

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[cwaldren-pushpress]

Coming over from vite, I got bit by this - I have some code that sets a proper default value if the variable is undefined, but in rsbuild, I get a runtime error like:

foo: (void 0).PUBLIC_SOME_VAR_NAME, <--- Uncaught TypeError: Cannot read properties of undefined

[krlls]

Adding the following configuration helped me:

source: {
  define: {
    ...env, // previously defined
    'process.env': {},
    'import.meta.env': {},
  },
}

With this setup:

import.meta.env.SOME_VAR // undefined
process.env.SOME_VAR     // undefined
process.env              // {}
import.meta.env          // {}
import.meta.env.SOME_DEFINED_VAR // some value

[LingyuCoder]

It's worth noting that rspack is the outlier here: The following code will work across all runtimes and bundlers but breaks in rspack.

expect(import.meta.env?.SOME_MISSING_VAR ?? 42).toBe(42); See "import⁠.meta.env?.X" row in bundlers.dev/javascript/modules/import.meta.

This bug has been fixed by #10030. So this issue has now turned into whether to support more properties on import.meta such as env, resolve, hot, etc. I will change it to the feature type for tracking and discussion.

[guowenfh]

Rsbuild v1.4.15 OK Rsbuild v1.5.0 ERROR

File: umd/index.js:1:1
  × Chunk minification failed:
  ╰─▶   × JavaScript parse error: 'import.meta' cannot be used outside of module code.
           ╭─[835:18]
       833 │     api.dispatch = (...a) => {
       834 │       var _a2;
       835 │       if (((_a2 = import.meta.env) == null ? void 0 : "production") !== "production" && a[0].type === "__setState" && !didWarnAboutReservedActionType) {
           ·                   ───────────
       836 │         console.warn(
       837 │           '[zustand devtools middleware] "__setState" action type is reserved to set state from the devtools. Avoid using it.'
           ╰────

[silverwind]

FYI, Webpack has added support for import.meta.env in https://github.com/webpack/webpack/pull/19996.