process.env.NODE_ENV replace bug

[ankyo]

Describe the bug

Error: Uncaught SyntaxError: Unexpected string (at msw.js?v=12ee2438:6178:115)

graphql/jsutils/instanceOf.js

_globalThis$process.env.NODE_ENV) === 'production'

.vite/deps/msw.js in browser

_globalThis$"development") === "production"

Reproduction

No Link

Steps to reproduce

The above should make the problem clear

System Info

System independent

Used Package Manager

pnpm

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.

[ankyo]

vite 4.3.9

[skeezrxcco]

We're having the same issue as well in our end, after updating npm.

@ankyo were you able to resolve it ?

[ankyo]

We're having the same issue as well in our end, after updating npm.

@ankyo were you able to resolve it ?

You can write a simple plugin to fix it

import { createUnplugin } from 'unplugin'

export const unplugin = createUnplugin((mode: string) => {
  return {
    name: 'unplugin-fixenv',
    transform(code) {
      if (code.includes('process.env.NODE_ENV')) {
        return code.replace(/_globalThis\$process\.env\.NODE_ENV/, `"${mode}"`)
      }
      return code
    },
  }
})

export const fixEnvForVite = unplugin.vite

export default defineConfig(
  {
    mode: 'development',
    plugins: [
      fixEnvForVite('development'),
    ],
  },
)

it works for me

[skeezrxcco]

Thanks a lot it worked! btw @ankyo do you think we're going to see an 'internal' fix that pertains to this issue or does this plugin makes the cut on the long term?

[github-actions]

Hello @ankyo. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[auvred]

Hi, this is a known issue, it seems that the fix will be shipped in v5.0 (#11151)

The issue occurs because $ treats as word boundary (\b) in this regular expression

vite/packages/vite/src/node/plugins/clientInjections.ts

Lines 7 to 8 in 8868fb7

	const process_env_NODE_ENV_RE =
	/(\bglobal(This)?\.)?\bprocess\.env\.NODE_ENV\b/g

[bluwy]

Yeah I think this is a duplicate of #9829. Closing in favor of it.