Describe the bug

Vite's client-inject plugin indiscriminately replaces process.env.NODE_ENV, even in comments and string literals. This is similar to #9790, where the issue happens in Vite's define plugin.

This becomes a problem in the following Vue template:

<template>
  <!-- NODE_ENV is process.env.NODE_ENV -->
  <h2>demo</h2>
</template>

@vue/compiler-sfc transforms that into this:

_createCommentVNode(" NODE_ENV is process.env.NODE_ENV ")
⋮

...which is passed to the client-inject plugin , which transforms that into this invalid JavaScript:

_createCommentVNode(" NODE_ENV is "development" ")
⋮

...which results in this runtime error:

Uncaught SyntaxError: missing ) after argument list

Also see #3304 (comment)

Reproduction

https://stackblitz.com/edit/vitejs-vite-yw5t84?file=src%2Fcomponents%2FHelloWorld.vue

System Info

System:
    OS: macOS 11.6.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 629.66 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/n/bin/node
    Yarn: 1.22.19 - ~/n/bin/yarn
    npm: 8.15.0 - ~/n/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Chrome Canary: 107.0.5259.0
    Firefox: 103.0.2
    Safari: 15.6
  npmPackages:
    vite: workspace:* => 3.0.9 

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.