Dependency issue? Subsequent variable declarations must have the same type. #3541

saibotsivad · 2018-08-24T23:05:08Z

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 😆

The text was updated successfully, but these errors were encountered:

saibotsivad · 2018-08-24T23:12:46Z

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 · 2018-08-25T02:54:13Z

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 · 2018-08-25T03:53:30Z

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 · 2018-08-25T04:23:41Z

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 · 2018-08-25T04:25:46Z

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

saibotsivad · 2018-08-25T04:45:38Z

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.

* feat(environments): add process declaration * remove @types packages after building starters quick hack because they interfere with starters build see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types * update app-scripts to 3.2.0

mityaika · 2018-08-28T02:58:02Z

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 · 2018-08-28T09:20:13Z

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 · 2018-08-28T12:32:45Z

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 · 2018-08-29T15:40:48Z

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 · 2018-08-29T16:47:24Z

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.

addresses ionic-team/ionic-cli#3541

imhoffd · 2018-08-29T21:49:05Z

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 · 2018-08-30T03:09:50Z

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

Dellos7 · 2018-08-30T22:50:30Z

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

luiscarlospando · 2018-09-04T20:27:58Z

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

kyleabens · 2018-09-26T03:12:31Z

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 · 2018-10-10T00:18:24Z

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

saibotsivad · 2018-10-10T14:17:54Z

Sure thing: link

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

giovannipds · 2018-10-31T19:49:52Z

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 · 2018-10-31T21:31:19Z

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 · 2018-11-06T08:33:15Z

^ perfect explanation thank you!

3.1.9: * fix(2889): fix build error with --prod * fix(serve): start listening when watch is ready * fix(live-server): update android platform path (ionic-team#1407) * docs(changelog): 3.1.9 3.1.10: * Update node-sass dependency (ionic-team#1435) Updating node-sass dependency from 4.7.2 to 4.9.0 to make it works with node 10 on windows (build fail with ionic start) * chore(package): bump deps (ionic-team#1421) * chore(deps): no package lock * chore(changelog): 3.1.10 3.1.11: * fix(serve): fix EADDRINUSE issue with dev logger server fixes ionic-team/ionic-cli#3368 fixes ionic-team/ionic-cli#1678 fixes ionic-team/ionic-cli#1830 fixes ionic-team/ionic-cli#1721 fixes ionic-team/ionic-cli#1866 fixes ionic-team/ionic-cli#1808 fixes ionic-team/ionic-cli#3022 * docs(changelog): 3.1.11 changes 3.2.0: * feat(environments): configuration via process.env.VAR replacement (ionic-team#1471) * fix(sass): remove PostCSS warning (ionic-team#1364) This removes following warning: Remove warning: Without `from` option PostCSS could generate wrong source map or do not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning `from: the input file name (most runners set it automatically).` Source: https://github.com/postcss/postcss Fixes ionic-team#1359 #13763 ionic-team#1359 ionic-team/ionic-framework#13763 * fix(serve): use wss protocol for secure websocket when page is using https (ionic-team#1358) * docs(changelog): 3.2.0 3.2.1: * docs(readme): add note about existing declaration addresses ionic-team/ionic-cli#3541 * chore(deps): update webpack to 3.12.0 (ionic-team#1477) * chore(deps): bump node-sass to 4.9.3 to fix security warnings (ionic-team#1483) * chore(deps): bump node-sass to 4.10.0 to fix security warnings (ionic-team#1493) * docs(changelog): 3.2.1

RaedShari · 2020-12-19T11:41:06Z

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

This declaration is only necessary if using the new environments for `@ionic/app-scripts`: https://github.com/ionic-team/ionic-app-scripts#environments The `process` declaration can be added by the dev whenever and however deemed necessary. fixes ionic-team/ionic-cli#3541

ionitron-bot bot added the triage label Aug 24, 2018

imhoffd added the bug label Aug 28, 2018

ionitron-bot bot removed the triage label Aug 28, 2018

sclausen mentioned this issue Aug 29, 2018

ionic project failed to build after installing ngx-mqtt sclausen/ngx-mqtt#110

Closed

mraible mentioned this issue Aug 29, 2018

Can't run a simple Ionic app after generating it with yo jhipster-ionic jhipster/generator-jhipster-ionic#51

Closed

imhoffd closed this as completed in ionic-team/starters@76da165 Aug 29, 2018

imhoffd added a commit to ionic-team/ionic-app-scripts that referenced this issue Aug 29, 2018

docs(readme): add note about existing declaration

50667cc

addresses ionic-team/ionic-cli#3541

fleboulch mentioned this issue Oct 2, 2018

fix(ionic-angular): Add support for environment feature ionic-team/starters#484

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dependency issue? Subsequent variable declarations must have the same type. #3541

Dependency issue? Subsequent variable declarations must have the same type. #3541

saibotsivad commented Aug 24, 2018

saibotsivad commented Aug 24, 2018

rdlabo commented Aug 25, 2018

saibotsivad commented Aug 25, 2018

rdlabo commented Aug 25, 2018

saibotsivad commented Aug 25, 2018

saibotsivad commented Aug 25, 2018 •

edited

Loading

mityaika commented Aug 28, 2018 •

edited

Loading

kieranbarlow commented Aug 28, 2018 •

edited

Loading

mityaika commented Aug 28, 2018

Dellos7 commented Aug 29, 2018 •

edited

Loading

imhoffd commented Aug 29, 2018

imhoffd commented Aug 29, 2018

saibotsivad commented Aug 30, 2018

Dellos7 commented Aug 30, 2018

luiscarlospando commented Sep 4, 2018

kyleabens commented Sep 26, 2018 •

edited

Loading

kyleabens commented Oct 10, 2018

saibotsivad commented Oct 10, 2018

giovannipds commented Oct 31, 2018

giovannipds commented Oct 31, 2018

d1sco commented Nov 6, 2018

RaedShari commented Dec 19, 2020

Dependency issue? Subsequent variable declarations must have the same type. #3541

Dependency issue? Subsequent variable declarations must have the same type. #3541

Comments

saibotsivad commented Aug 24, 2018

saibotsivad commented Aug 24, 2018

rdlabo commented Aug 25, 2018

saibotsivad commented Aug 25, 2018

rdlabo commented Aug 25, 2018

saibotsivad commented Aug 25, 2018

saibotsivad commented Aug 25, 2018 • edited Loading

mityaika commented Aug 28, 2018 • edited Loading

kieranbarlow commented Aug 28, 2018 • edited Loading

mityaika commented Aug 28, 2018

Dellos7 commented Aug 29, 2018 • edited Loading

imhoffd commented Aug 29, 2018

imhoffd commented Aug 29, 2018

saibotsivad commented Aug 30, 2018

Dellos7 commented Aug 30, 2018

luiscarlospando commented Sep 4, 2018

kyleabens commented Sep 26, 2018 • edited Loading

kyleabens commented Oct 10, 2018

saibotsivad commented Oct 10, 2018

giovannipds commented Oct 31, 2018

giovannipds commented Oct 31, 2018

d1sco commented Nov 6, 2018

RaedShari commented Dec 19, 2020

saibotsivad commented Aug 25, 2018 •

edited

Loading

mityaika commented Aug 28, 2018 •

edited

Loading

kieranbarlow commented Aug 28, 2018 •

edited

Loading

Dellos7 commented Aug 29, 2018 •

edited

Loading

kyleabens commented Sep 26, 2018 •

edited

Loading