pages contains process.env.NODE_ENV !== 'production' report 404 error

[Alanscut]

Describe the bug

any page which contains process.env.NODE_ENV !== 'production', it will report 404 error

Reproduction

step 1: clone https://github.com/Alanscut/vitepress-demo

step 2: run the project

step 3: visit the page

Expected behavior

could visit the page normally, the page will show:

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 7.05 GB / 15.90 GB
  Binaries:
    Node: 12.22.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - E:\npm\repo\yarn.CMD
    npm: 7.21.1 - ~\node_modules\.bin\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.50)
    Internet Explorer: 11.0.19041.1202

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[Alanscut]

This seems to be a bug of https://github.com/vitejs/vite

vitepress/src/client/app/index.ts

Line 119 in 773472d

return import(/*@vite-ignore*/ pageFilePath)

[soetz]

More precisely, my observations are it’s just process.env.NODE_ENV that makes it break.

I was about to report the same thing so I have another example repo.

[mrcego]

It could be nice to merge that pull request knowing the issue is resolved on it.

[Akryum]

Same issue here: https://github.com/vuejs/devtools/blob/6d8aba08346528847b361b0991073934bd324531/docs/plugin/plugins-guide.md

I can reproduce with the following page: https://gist.github.com/Akryum/912fa79590605925753b93cbd75b6440

[mrcego]

News about this issue?

[kiaking]

I can reproduce this issue too, but how come current Vite site is working 🤔 It's using 0.22.4 (the latest) I think.

[kiaking]

Oh, OK. Build works. It's failing on Dev mode only. Still we need to fix this.

[kiaking]

Discussion is going on at vitejs/vite#5577 and Vite team is aware of this. Until it gets resolved, please workaround this issue with 👉 vitejs/vite#5577 (comment)

We'll absolutely need to fix this before 1.0.0.

[meteorlxy]

I found the cause is that process.env.NODE_ENV is being statically replaced even in dev mode. 🤔

So a possible fix is to implement the build mode workaround to dev mode, too. But I'm still curious about why that's happening

[brc-dd]

This looks much better than than that wbr workaround:

`{{ 'process' + '.env.NODE_ENV' }} !== 'production'`

(Second one is using wbr tag.)

[meteorlxy]

I found the reason, vite always statically replaces process.env.NODE_ENV in dev mode (which is not mentioned in the docs):

https://github.com/vitejs/vite/blob/cad27ee8c00bbd5aeeb2be9bfb3eb164c1b77885/packages/vite/src/node/plugins/clientInjections.ts#L57-L64

Now the solution is simple: always "escape" process.env in dev mode. I'll send a PR later.