Uncaught ReferenceError: process is not defined

[ljcremer]

• [x ] Read the docs.
• [x ] Use Vite >=2.0. (1.x is no longer supported)
• [ x] If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

When I upgrade vite to any version after 2.0.0-beta.62 I get the error as follows:
App.vue:36 Uncaught ReferenceError: process is not defined
at setup (App.vue:36)
at callWithErrorHandling (runtime-core.esm-bundler.js:154)
at setupStatefulComponent (runtime-core.esm-bundler.js:6419)
at setupComponent (runtime-core.esm-bundler.js:6380)
at mountComponent (runtime-core.esm-bundler.js:4118)
at processComponent (runtime-core.esm-bundler.js:4094)
at patch (runtime-core.esm-bundler.js:3712)
at render2 (runtime-core.esm-bundler.js:4794)
at mount (runtime-core.esm-bundler.js:3019)
at Object.app.mount (runtime-dom.esm-bundler.js:1220)

Reproduction

https://github.com/ljcremer/vite-test

System Info

• vite version: 2.0.0-beta.67
• Operating System: Windows 10
• Node version:v12.19.1
• Package manager (npm/yarn/pnpm) and version:6.14.8

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[CHOYSEN]

process.env is removed by 8ad7ecd, you can use import.meta.env instead

See more: https://vitejs.dev/guide/env-and-mode.html

[underfin]

As @CHOYSEN said.

[bergkvist]

Why is process.env removed? A lot of existing libraries use this. Including blueprintjs (Example: https://github.com/palantir/blueprint/blob/develop/packages/core/src/common/classes.ts)

The consequence is that I can't use the blueprintjs (without forking and modifying the library). Would it at least be possible to provide process.env as an alias to import.meta.env?

[bergkvist]

I found that I can use the following in vite.config.ts to avoid "Uncaught ReferenceError: process is not defined":

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

[antonio-wundermart]

Is there any way to support process.env way to access dotenv?
The problem is that using import.meta goes in conflict with jest (we use typescript):
kulshekhar/ts-jest#1174
And there's no viable way of using it for us without introducing babel and additional overhead.

The only other strategy is to give up on using Vite and roll back to vue cli, which is something that we are trying to avoid since we like Vite performances.

Is there any other way to set process.env?

[pierrot-le-foo]

I found that I can use the following in vite.config.ts to avoid "Uncaught ReferenceError: process is not defined":

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

I personally do:

export default defineConfig({
  // ...
  define: {
    'process.env': process.env
  }
})

[NPatel10]

I found that I can use the following in vite.config.ts to avoid "Uncaught ReferenceError: process is not defined":

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

I personally do:

export default defineConfig({
  // ...
  define: {
    'process.env': process.env
  }
})

This works for me while development but after build process becomes undefined.

[lexwebb]

All of these issues relating to undefined globals appear closed with no real resolutions. Is there some way of polyfilling these things (process, global, etc.) that actually works? I've tried rollup plugins like rollup-plugin-polyfill-node but im still facing issues.

Obviously the real culprit here is libraries which are behind the curve in supporting esm properly, but sometimes we need to use them.

[Obiwarn]

Indeed.

E.g.: How can I display the current app version from package.json to the user using Vite?

[Niputi]

@Obiwarn try to take a look at this package https://github.com/smnhgn/vite-plugin-package-version

[Obiwarn]

@Niputi Thank you. I tried this already but got some errors. ("0.0.1" is not a number)

[EdwardKerckhof]

Is there any way to support process.env way to access dotenv?
The problem is that using import.meta goes in conflict with jest (we use typescript):
kulshekhar/ts-jest#1174
And there's no viable way of using it for us without introducing babel and additional overhead.

The only other strategy is to give up on using Vite and roll back to vue cli, which is something that we are trying to avoid since we like Vite performances.

Is there any other way to set process.env?

Have you found any solution to this? Having the exact same issue at the moment.

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.