Library Mode replaces "process.env.NODE_ENV"

[wuifdesign]

Describe the bug

process.env.NODE_ENV gets replaced and removes code in library mode. This is an undesirable behaviour as i want to have this check in the project i'm going to import the library.

Reproduction

export const testFunction = () => {
  if (process.env.NODE_ENV === 'development') {
    alert('This is a Test');
  }
}

if build with vite build using this config:

import { defineConfig } from 'vite';
import * as path from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'myProject',
    },
  },
});

it will become:

const testFunction = () => {
};

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz
    Memory: 8.36 GB / 15.94 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 90.0.4430.93
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.51)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.2.3 => 2.2.3

Used package manager: npm

---

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[Shinigami92]

Please try to apply this workaround: #3077 (comment)

[wuifdesign]

@Shinigami92 i saw this issue before opening my bug report, but this workaround isn't working as i have a variable not a string. process.env\u200b.NODE_ENV is not a valid variable name.

[Shinigami92]

And is process.env['NODE_ENV'] maybe working? 🤔

[wuifdesign]

@Shinigami92 i think this would work, but i would still consider this as a bug. i hate modifying code (make it harder to read) to match a build tool and i don't think this should happen in library mode.

[Shinigami92]

I didn't say you should close this issue 😅
But we are working on some higher prio issues right now
And this bug already has a working work around 🙂

[patak-dev]

Maybe we should close this one duplicate of #3176
@GrygrFlzr leaving it open, as another case where a config option to disable this feature would be helpful. I'm leaning towards both having an option and changing the default to SSR as discussed.

[colgin]

And is process.env['NODE_ENV'] maybe working? 🤔

Nope, use process.env['NODE_ENV'] in library code, process.env['NODE_ENV'] will be preserved in your application code, this is expected behavior because process in undefined in browser. @Shinigami92

In this case, you should declare replace plugin in your appliation like this.

replace({
  'process.env.NODE_ENV': JSON.stringify('production'),
  `process.env['NODE_ENV']`: JSON.stringify('production'),
})
`

[LeBenLeBen]

I was able to preserve process.env.NODE_ENV in the build files by adding the following to the config:

define: {
  'process.env.NODE_ENV': 'process.env.NODE_ENV',
},

EDIT: Actually this throws in serve mode, so you have to conditionally define it in production mode only:

import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const isProd = mode === 'production';

  const config = {
    // ...
  };
  
  if (isProd) {
    config.define = {
      'process.env.NODE_ENV': 'process.env.NODE_ENV',
    };
  }

  return config;
});

[melMass]

Hello,

I"ve read all the related issue but I don't understand how to solve it for external libraries, in my case js-ipfs:

https://github.com/ipfs/js-ipfs-utils/blob/b319e67a47268870f9defc4c7bfa7c1bb450f424/src/env.js#L13

[NightlySide]

Hello,

I"ve read all the related issue but I don't understand how to solve it for external libraries, in my case js-ipfs:

https://github.com/ipfs/js-ipfs-utils/blob/b319e67a47268870f9defc4c7bfa7c1bb450f424/src/env.js#L13

I got this fixed using:

optimizeDeps: {
		esbuildOptions: {
			// Node.js global to browser globalThis
			define: {
				global: "globalThis",
				// my fix
				"globalThis.process.env.NODE_ENV": "development"
			},
}

[xxxxj-up]

你好
我已经阅读了所有相关问题，但我不明白如何为外部库解决它，在我的情况下js-ipfs：
https://github.com/ipfs/js-ipfs-utils/blob/b319e67a47268870f9defc4c7bfa7c1bb450f424/src/env.js#L13

我通过以下方式修复了此问题：

optimizeDeps: {
		esbuildOptions: {
			// Node.js global to browser globalThis
			define: {
				global: "globalThis",
				// my fix
				"globalThis.process.env.NODE_ENV": "development"
			},
}

Hello, I still haven't solved this problem. Is there any other solution