Browser polyfill for `process.env`

Environment

Nuxt CLI v3.0.0-27375427.d07d572
RootDir: /home/kael/Documents/vuetifyjs/test-projects/nuxt3/nuxt3-app
Nuxt project info:
------------------------------
- Operating System: `Linux`
- Node Version:     `v16.13.2`
- Nuxt Version:     `3.0.0-27375427.d07d572`
- Package Manager:  `yarn@1.22.5`
- Bundler:          `Vite`
- User Config:      `css`, `build`, `vite`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

Create a plugin with

console.log(typeof process)
console.log(process.env.NODE_ENV)

and look at the browser console.

Describe the bug

process is { dev: true, server: false, client: true }, should be undefined process.env.NODE_ENV throws TypeError: Cannot read properties of undefined (reading 'NODE_ENV'), should be 'development'

Additional context

This works with just vite, idk what you’re doing to disable that. It looks like this is also set up correctly for builds with @rollup/plugin-replace, so it’s only a problem during dev.

Logs

No response

[madjidtaha]

Hello everyone This happen to me as well using nuxt rc11 when trying to use theatre.js, I found a workaround using vite.define object in nuxt.config.ts. After that, process look like this : { dev: true, server: false, client: true, env: {} } and dependencies work as intended and doesn’t seem to be broken.

Here is the nuxt.config.ts file I used, I hope that could be helpful

import svgLoader from 'vite-svg-loader'
import glslLoader from 'vite-plugin-glsl'
export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  ssr: false,
  css: ['@/assets/styles/index.css'],
  vite: {
    define: {
      // Fix broken dependencies of theatre.js
      'process.env': {},
    },
    plugins: [glslLoader(), svgLoader()],
  },
})

[Saul-Mirone]

This seems appear again. The process in browser doesn’t have a env property that breaks some packages.