Ionic-cli: Dependency issue? Subsequent variable declarations must have the same type.

[saibotsivad]

Description:

After following the "Getting Started" guide for setting up my first app with the sidemenu template, I get a typescript error:

[app-scripts] [17:50:26]  typescript: node_modules/@types/node/index.d.ts, line: 80 
[app-scripts]             Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key: 
[app-scripts]             string]: string; }; }', but here has type 'Process'. 
[app-scripts]       L79:  interface NodeRequire extends NodeRequireFunction {
[app-scripts]       L80:      resolve(id: string): string;
[app-scripts]       L81:      cache: any;

Steps to Reproduce:

Following the steps as listed in the CLI getting started section, except using npx:

npx ionic start myApp sidemenu
cd myApp
npm install --save-dev ionic

I then edit the package.json to add a run script:

"serve": "ionic serve -c"

Output:

The following logs are produced:

> ionic-app-scripts serve --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser
[app-scripts] [17:50:19]  ionic-app-scripts 3.2.0 
[app-scripts] [17:50:19]  watch started ... 
[app-scripts] [17:50:19]  build dev started ... 
[app-scripts] [17:50:19]  clean started ... 
[app-scripts] [17:50:19]  clean finished in 1 ms 
[app-scripts] [17:50:19]  copy started ... 
[app-scripts] [17:50:19]  deeplinks started ... 
[app-scripts] [17:50:19]  deeplinks finished in 43 ms 
[app-scripts] [17:50:19]  transpile started ... 
[app-scripts] [17:50:26]  typescript: node_modules/@types/node/index.d.ts, line: 80 
[app-scripts]             Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key: 
[app-scripts]             string]: string; }; }', but here has type 'Process'. 
[app-scripts]       L79:  interface NodeRequire extends NodeRequireFunction {
[app-scripts]       L80:      resolve(id: string): string;
[app-scripts]       L81:      cache: any;

[INFO] Development server running!
# snip #

My ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.1.1
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.1.2 (/Users/saibotsivad/.nvm/versions/node/v8.1.2/bin/node)
   npm    : 6.4.0
   OS     : macOS High Sierra

Other Information:

I am not yet familier with TypeScript, so I went digging and found that @types/node is at 10.9.1 but then npm ls @types/node shows what's being used in the ionic project is 6.0.116, which seems really old.

I couldn't quite track down the dependency tree to see where those would get updated, so maybe this outdated dependency is a documented issue already?

Still, having the "Getting Started" demo app break is probably not great 😆

[saibotsivad]

Additional info:

If I do the same flow, but use the tabs demo instead of sidemenu, it is still broken.

It was working earlier this morning with tabs, then I updated npm from 6.1.0 to 6.4.0 and now it's breaking in this way.

Although I shouldn't need to, I ran npm cache clean --force (in case the upgrade broke something) and tried again, and that didn't do anything.

[rdlabo]

I worked.
Node version is too old, can you try up to v8.11?

Ionic:

   ionic (Ionic CLI)  : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

System:

   NodeJS : v8.11.3 (/usr/local/bin/node)
   npm    : 6.4.0
   OS     : macOS High Sierra

[saibotsivad]

I didn't notice the version was old, sorry about that! Unfortunately, I updated to node 8.11.4 and am getting the same error.

System Info:

Ionic:

   ionic (Ionic CLI)  : 4.1.1
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   NodeJS : v8.11.4 (/Users/saibotsivad/.nvm/versions/node/v8.11.4/bin/node)
   npm    : 6.4.0
   OS     : macOS High Sierra

With the same error:

[app-scripts] [22:52:04]  typescript: node_modules/@types/node/index.d.ts, line: 80 
[app-scripts]             Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key: 
[app-scripts]             string]: string; }; }', but here has type 'Process'. 
[app-scripts]       L79:  interface NodeRequire extends NodeRequireFunction {
[app-scripts]       L80:      resolve(id: string): string;
[app-scripts]       L81:      cache: any;

[rdlabo]

Sorry. I missed Steps to Reproduce. I don't work too.

and maybe, this is feature Issue. https://github.com/ionic-team/ionic-cli/issues/3300
(now capacitor cli only. I'm sorry if my writing is full of mistakes.

[saibotsivad]

Interesting. I will try the global install instead of using npx and see what happens.

[saibotsivad]

Instead of using an npm run script, I decided to try installing ionic globally:

# remove from project folder
npm uninstall --save ionic
# install globally
npm install -g ionic
# run it
ionic serve -c

This worked!

Two thoughts:

• It seems like there's something wrong that an npm run script would _not_ work, but installing globally _would_ work. I should be able to have use two versions of ionic, one in one project and one in another, and run them with correct scoping/etc. via npm run scripts.
• It is peculiar that it worked with npm 6.1, which is what I had installed when I ran it with npm run scripts and it worked. Once I updated to npm 6.4, it stopped working.

_Edit: accidentally hit the enter key._

[mityaika]

I got this issue stable reproducible: npm install @ionic/lab brings this error.

`$ ionic info
✔ Gathering environment info - done!

Ionic:

ionic (Ionic CLI) : 4.1.1 (/Users/\ Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

System:

NodeJS : v8.11.3 (/usr/local/bin/node)
npm : 6.4.0
OS : macOS High Sierra`

$ npm ls | grep ionic\/lab ├─┬ @ionic/[email protected]

[kieranbarlow]

Same issue, I'm getting the message

Typescript Error
Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key: string]: string; }; }', but here has type 'Process'.

When running the command

ionic serve

Output from Ionic Info

Ionic:

   ionic (Ionic CLI)  : 4.1.1 (C:\Users\USERNAME\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 7.0.1
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 25.3.1 (C:\Users\USERNAME\AppData\Local\Android\Sdk)
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

[mityaika]

It happens when Ionic 4 project created with "classic" type ionic-angular and then @ionic/lab installed. ionic-angular does not require @ionic/lab to be installed, lab can be accessed via http://localhost:8100/ionic-lab it does not require another "lab" process to be running.

So, if using type=angular, install @ionic/lab it will work fine
if using type=ionic-angular, which is default for now, do not install @ionic/lab

[Dellos7]

I get the same error when doing ionic serve and I'm not able to solve it in any way.

Ionic info:

✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.1.1
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

System:

   NodeJS : v8.11.4 (/usr/local/bin/node)
   npm    : 6.4.0
   OS     : macOS High Sierra

package.json:

"dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@capacitor/cli": "^1.0.0-beta.7",
    "@capacitor/core": "^1.0.0-beta.7",
    "@capacitor/ios": "^1.0.0-beta.7",
    "@ionic-native/core": "~4.11.0",
    "@ionic-native/splash-screen": "~4.11.0",
    "@ionic-native/status-bar": "~4.11.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.1.3",
    "ionic": "^4.1.1",
    "ionic-angular": "^3.9.2",
    "ionicons": "3.0.0",
    "pdf-viewer": "file:../Plugins/pdf-viewer",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  }

Edit:

My issue seems to be related to Capacitor. If I do:

ionic start myApp blank
cd myApp
ionic serve

It works.

But then I install capacitor:

npm install --save @capacitor/core @capacitor/cli
ionic serve

It breaks with the error:

[app-scripts] [17:46:08]  typescript: node_modules/@types/node/index.d.ts, line: 195
[app-scripts]             Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key:
[app-scripts]             string]: string; }; }', but here has type 'Process'.
[app-scripts]      L194:      (id: string, options?: { paths?: string[]; }): string;
[app-scripts]      L195:      paths(request: string): string[] | null;

[imhoffd]

The issue is when node_modules/@types/node exists in conjunction with the new src/declarations.d.ts file. There are a few packages which may install the node typings, so the error may happen randomly. I'm still unsure why the variable declaration types can't merge. My plan is to look at this today.

[imhoffd]

I removed src/declarations.d.ts from the starters, as it is only really necessary when using the new Environments feature in @ionic/app-scripts. I suggest those not using the new feature delete src/declarations.d.ts from their projects as well. Additional solutions are below.

If you get the Subsequent variable declarations must have the same type error, it's because TypeScript is encountering two incompatible global declarations for process (our simple shim here and the one provided by @types/node are incompatible). TypeScript auto-imports node_modules/@types/* by default (see these docs), so any time @types/node is installed by some dependency

The possible solutions are:

• Delete src/declarations.d.ts and include all the Node typings in your Ionic app (probably not great as Node has a few globals that might result in a successful compilation but runtime errors)
• Uninstall whatever is installing @types/node (likely not possible)
• Configure types to whitelist which typings in node_modules/@types are allowed (see these docs). You can set "types": [] to disallow any automatic inclusion of installed typings in your project.

Thanks for the bug report and investigating everyone! 🎉

cc @nphyatt

[saibotsivad]

I added the "types": [] to the "compilerOptions" of tsconfig.json and it works fine. Thanks for the help!

[Dellos7]

Adding "types": [] to the "compilerOptions" parameter of tsconfig.json works also for me. Thank you!

[luiscarlospando]

Here, I can also confirm that adding "types": [] to "compilerOptions" inside tsconfig.json worked. Problem solved!

[kyleabens]

I tried adding "types": [] to compilerOptions and I'm still getting this error which is odd.

Typescript Error
Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key: string]: string; }; }', but here has type 'Process'.
node_modules/@types/node/index.d.ts

No matter what I do it is always conflicting with the var process from @types/node. I tried removing the package but I have too many things in my app that require @types/node. Is there anything else I can do?

[kyleabens]

@saibotsivad can you post your tsconfig so I can compare?

[saibotsivad]

Sure thing: link

That's the default tsconfig.json file it starts with, and then I added line 15 "types": [] to it.

[giovannipds]

I was with the same error, adding "types": [] solved the ts lint error but now I got process is not defined when trying to get it on a service...

[giovannipds]

If anybody else (like me) fell here because of a project using process.env variables (probably migrating Ionic 3 to Ionic 4), please disconsider process.env variables and use Ionic 4 environments. There's a dir with environments and they should be defined there. To use it anywhere else, just import it from environments/environment and let Ionic take care of the env name. You could also put that file on .gitignore if needed.

[d1sco]

^ perfect explanation thank you!

[RaedShari]

I can confirm types": [] solved the issue 👍