unable to use some strings as vite is replacing env variables

[itismoej]

Describe the bug

The bug is already mentioned here: #3077

The problem is that we can not always use the workaround which is using 'process.env\u200b.NODE_ENV' instead of 'process.env.NODE_ENV'.

For example, if you are using esbuild-wasm and need to use the define object, the desired object is as follows:

const result = await esbuild.build({
    ... // other irrelevant configs
    define: {
      "process.env.NODE_ENV": '"development"',
    },
  });

But this will be converted to:

define: {
  ""development"": '"development"',
},

Which clearly has a syntax error.

You also are not able to use 'process.env\u200b.NODE_ENV' instead; because it is not the expected key for esbuild-wasm or any other libraries. The workaround I used is as follows:

const result = await esbuild.build({
    ... // other irrelevant configs
    define: {
      // vite compatibility! https://github.com/vitejs/vite/issues/3077
      // eslint-disable-next-line no-eval
      [eval('"process"') + ".env.NODE_ENV"]: '"development"',
    },
  });

Reproduction

https://stackblitz.com/edit/vitejs-vite-gzsbyb?file=main.js

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 2.86 GB / 15.47 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 104.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

Duplicate of #9829

For your use case, you can workaround it with:

const result = await esbuild.build({
    ... // other irrelevant configs
    define: {
      ["process.env." + "NODE_ENV"]: '"development"',
    },
  });

[itismoej]

Duplicate of #9829

For your use case, you can workaround it with:

const result = await esbuild.build({
    ... // other irrelevant configs
    define: {
      ["process.env." + "NODE_ENV"]: '"development"',
    },
  });

I did that and it didn't work. It turns to :

define: {
  [""development""]: '"development"'
},

[bluwy]

Hmm I suppose down the line something combined it automatically so it'd be the same as "process.env.NODE_ENV". The workaround you showed using eval may be the simpler though hacky way for now.