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. #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/<username>/.npm-packages/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`

$ npm ls | grep ionic\/lab ├─┬ @ionic/lab@1.0.8

[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