vite will automatically escape and replace the string form"process.env.NODE_ENV:" content!!!

[chen00jian]

Describe the bug

I want print process.env.NODE_ENV:
console.log("process.env.NODE_ENV:", process.env.NODE_ENV);

actually: bug :
1、browser Error: Uncaught SyntaxError: missing ) after argument list
2、browser/Sources : console.log(""development":", "development"); "process.env.NODE_ENV:" is replace development

expect ：process.env.NODE_ENV: development

step:
1、npm init @vitejs/app
2、npm i && npm run dev
3、open and modify src\main.js

    add: console.log("process.env.NODE_ENV:", process.env.NODE_ENV);
    
    // src/main.js
    import {createApp} from "vue";
   import App from "./App.vue";

  console.log("process.env.NODE_ENV:", process.env.NODE_ENV);

   createApp(App).mount("#app");

4、Refresh page http://localhost:3000/

 Error: Uncaught SyntaxError: missing ) after argument list

[Shinigami92]

Why not using e.g. import.meta.env.DEV directly? https://vitejs.dev/guide/env-and-mode.html

[chen00jian]

Why not using e.g. import.meta.env.DEV directly? https://vitejs.dev/guide/env-and-mode.html

yes! but I only want my string process.env.NODE_ENV don't be replaced !

[chen00jian]

code location：

[nrayburn-tech]

While this section references import.meta, it also applies for process.env. https://vitejs.dev/guide/env-and-mode.html#production-replacement

To get what you want, just follow the docs there. console.log('process.env\u200b.NODE_ENV:', process.env.NODE_ENV) will print what you are looking for.
process.env.NODE_ENV: development

I can't speak as to why static replacement is used, I can only assume that it is done for performance reasons. The drawback is that it has to be escaped in this way.

[ilovepumpkin]

@nrayburn-tech it is easy to use this workaround if people has the ownership of the code, but if the problem happens in third party package, it will depends on if that package owner would use this workaround or not.

Now I am facing this issue now, I am using mobx@5.9.0, and when using vite, I got the following syntax error after process.env.NODE_ENV is replaced.

So I think it would be better if there is a way to turn off the replacement at least before the third party fix the issue, otherwise before that I am blocked here.

[patak-dev]

@ilovepumpkin this is an issue also with rollup (and maybe other bundlers). It is not going to be easy to fix this in Vite, and I don't think it will change in the near future.

mobx for example decided to rework the way that console.warn to avoid this issue in this PR
mobxjs/mobx#1931, you can see the trick they added here. So the best at this point would be that you update to mobx@5.10.0 that already includes this if possible. If you can't update the dependency, you could use https://www.npmjs.com/package/patch-package to patch that version replacing 'process.env.NODE_ENV' by 'NODE_ENV' in that warning.

[ilovepumpkin]

@patak-js thank you! patch-package sounds a good trick. I will give it a try.

[patak-dev]

I think we should close this issue, as it is the same behavior that rollup has. You can use

console.log('process.env\u200b.NODE_ENV:', process.env.NODE_ENV)

as suggested in #3077 (comment)