TypeScript error in .vue files: Cannot find name 'process'

[ataylor32]

I have a Vue project that was generated with Vue CLI. I have some VUE_APP_* variables that I access throughout my codebase by using process.env.VUE_APP_*. This works fine, but recently Visual Studio Code started showing an error for process in my .vue files. When I hover over it, this is what it says:

Cannot find name 'process'. Do you need to install type definitions for node? Try npm i --save-dev @types/node and then add 'node' to the types field in your tsconfig.ts(2591)

npm run serve doesn't show an error and the code works in the browser. In addition, process.env.VUE_APP_* works fine in .js and .ts files (Visual Studio Code doesn't report any errors with process and I can hover over it and it shows NodeJS.Process for its type). This also only happens with Volar. When I open the exact same codebase with Vetur instead of Volar, it works fine.

[ataylor32]

I investigated some more and it looks like this bug was introduced with version 0.38.7.

[johnsoncodehk]

I can't reproduce this problem with installed @types/node, please provide minimal reproduction.

[ataylor32]

I will look into making a minimal reproduction, but did you try it with a project generated by Vue CLI?

[ataylor32]

I still haven't made a minimal reproduction, but I did get more information. The problem seems to only occur when you add the parent folder in Visual Studio Code. For example, like this:

1. mkdir example
2. cd example
3. vue create vueproject (Install TypeScript, but leave everything else set to the defaults)

After you do the above, if you add the "example" folder to Visual Studio Code then process doesn't work correctly in .vue files, but if you add the "vueproject" folder to Visual Studio Code then it does.

[johnsoncodehk]

It may relate to #1679, please try v0.40.4 and let me know if it don't fix.

[ataylor32]

The bug is still present in v0.40.4. Do you want an example repository or are the instructions I provided good enough?

[jakenuts]

I fixed this by adding 'node' to the types in my tsconfig.json. After trying all the various webpack/define/process fixes I thought were the problem.

[mccxiv]

For anyone reaching this thread today, if you're using Vite you need to change process.env to import.meta.env as per https://vitejs.dev/guide/env-and-mode#env-variables then make sure to have the vite types inside your tsconfig compilerOptions:

"types": [
  "vite/client"
]