Nuxt.js: process is not defined

[vinayakkulkarni]

Version

v2.7.0

Reproduction link

https://github.com/nuxt/nuxt.js/releases/tag/v2.7.0

Steps to reproduce

• npm up to upgrade to nuxt 2.7.0
• have "@nuxtjs/dotenv": "^1.3.0", as dep in your project
• have require('dotenv').config(); in your nuxt.config.js file

try to use process.env variables in your nuxt.config.js, and it'll throw a error

What is expected ?

Ability to access .env variables inside the nuxt app

What is actually happening?

Nuxt app breaks down squawking about the process error

Additional comments?

Screenshot from @cannap on Discord

Screenshot from me:

_{This bug report is available on Nuxt community (#c9208)}

[T0TProduction]

can confirm just updated my dependencies, including nuxt to 2.7, and this killed my app

[manniL]

Could one of you provide a minimal reproduction repo or codesandbox please?

[pi0]

ci-info is not a dependency of @nuxtjs/dotenv so the issue may be originating from somewhere else or import/require a Node.js lib in application code. Can you please share result of yarn why ci-info? (only std-env should be listed) (Sharing nuxt.config.js would be useful as well)

[sobolevn]

I have the same bug.

I use (source):

const envPath = path.resolve(__dirname, 'config', '.env')
require('dotenv').config({ 'path': envPath })

And also:

/**
   * Environment variables
   */
  'env': {
    'GOOGLE_MAPS_KEY': process.env.GOOGLE_MAPS_KEY,
  },

in my local nuxt.config.ts.

[clarkdo]

@sobolevn Could you chat with me on discord so that we can get response timely ?

[sobolevn]

@clarkdo sure. Texted you

[daniplaninc]

I have the same issue.

output of npm list ci-info:

+-- @nuxtjs/[email protected]
| -- [email protected]
| -- [email protected]
| -- [email protected]
| -- [email protected] deduped
-- [email protected]
+-- @nuxt/[email protected]
| +-- @nuxt/[email protected]
| | -- [email protected]
| | -- [email protected] deduped
| -- [email protected]
| -- [email protected]
+-- @nuxt/[email protected]
| -- [email protected]
| -- [email protected] deduped
-- @nuxt/[email protected]
+-- [email protected]
| -- [email protected] deduped
-- [email protected]
-- [email protected]
-- [email protected] deduped

*Edit: I tried to fix formatting but cant make it any better, so I made a screenshot too

[clarkdo]

Through the communication with @sobolevn , the issue is due to hoisted consola version, if you're having this issue, please install consola 2.x manually by:

$ npm i consola@^2.6.1

# or

$ yarn add consola@^2.6.1

We'll propose a fix ASAP

[pi0]

fixed in v2.7.1

[Skriptach]

@pi0
I have ^2.10.2 and still reproduce

[jcat4]

@pi0
I have ^2.10.2 and still reproduce

Same, I'm running 2.11 and still can't access process...

[jcat4]

@pi0
I have ^2.10.2 and still reproduce

Same, I'm running 2.11 and still can't access process...

Okay, I think I was misunderstanding a few things. NODE_ENV defaults are indeed set (see this commit)

My understanding in a nutshell (correct me if I'm wrong) is that nuxt.config.js has access to process.env but does not implicitly propagate that access to the rest of the code.

So in order to have access to something like process.env.NODE_ENV from my components, I needed to do a few things.

First, in nuxt.config.js, you need to propagate your process.env.whatever values under an env key in your module.exports so that your components can access them too. In this case, I want NODE_ENV.

nuxt.config.js

module.exports = {
  ...
  env: {
    NODE_ENV: process.env.NODE_ENV
  },
  ...
}

Now, when _explicitly_ attempting to access process.env.NODE_ENV in any of my components, I get production or development depending on the command I run (npm dev produces "development", npm start produces "production")

YourComponent.vue

...

mounted () {
  console.log(`process.env.NODE_ENV: ${process.env.NODE_ENV}`) // process.env.NODE_ENV: development
}

...

Something that was confusing me was that I couldn't access process.env.NODE_ENV in the debugger in the browser. I would set a debugger in the same methods/hooks I'm logging process.env.NODE_ENV in as an example, and I get undefined for process.env.NODE_ENV and an empty object {} for process.env. Before that, I was getting things like process is undefined.

Despite all that weirdness, I can now access env vars, including NODE_ENV vars that are generated by default (I don't set NODE_ENV or use cross-env or anything for my scripts in package.json).

Hopefully this helps someone!

[thomasdavis]

Could someone update the docs on this? Doesn't seem to work as intended on [email protected].

process is undefined.

[Edofre]

@thomasdavis Do you have the line require('dotenv').config() at the top of your nuxt.config.js? That has solved it for me.

[NotMoni]

@thomasdavis try require('dotenv').config() first. If that doesnt work, try

const env = require('dotenv');
env.config();

This code has worked when require('dotenv').config() doesnt.