framework

framework copied to clipboard

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:  `[email protected]`
- 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

Would you provide a reproduction? 🙏

Not sure what happened here, it seems to be working now.

Magic ✨

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

I guess vite only supports env using import.meta.env. Related enhahncenemnt: https://github.com/nuxt/framework/issues/1502

I guess vite only supports env using import.meta.env. Related enhahncenemnt: #1502

Yeah, would you consider giving it some workaround to make packages that depend on process.env work? For now, packages like kleur will be broken.

I'm certain we can! Do you mind make a small sandbox with kleur and nuxt 3 I can fork?

I'm certain we can! Do you mind make a small sandbox with kleur and nuxt 3 I can fork?

Sure, here it is: https://stackblitz.com/edit/github-fkzpox?file=app.vue

I started having this issue again, last time was in November.

If I can do something to help find the cause of this issue...

https://stackblitz.com/edit/github-fkzpox?file=app.vue

@Saul-Mirone the sandbox link that you provided is not working... Could you please update it? Please also update nuxt to rc9!

https://stackblitz.com/edit/github-fkzpox?file=app.vue

@Saul-Mirone the sandbox link that you provided is not working... Could you please update it? Please also update nuxt to rc9!

I can't reproduce it in rc9 now. 👍

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()],
  },
})