Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
saibotsivad opened this Issue Aug 24, 2018 · 21 comments

Comments

Projects
None yet
10 participants
@saibotsivad
Copy link

commented Aug 24, 2018

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 😆

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

@saibotsivad

This comment has been minimized.

Copy link
Author

commented Aug 24, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Aug 25, 2018

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

This comment has been minimized.

Copy link
Author

commented Aug 25, 2018

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

This comment has been minimized.

Copy link
Contributor

commented Aug 25, 2018

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

This comment has been minimized.

Copy link
Author

commented Aug 25, 2018

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

@saibotsivad

This comment has been minimized.

Copy link
Author

commented Aug 25, 2018

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.

rdlabo referenced this issue in ionic-team/starters Aug 28, 2018

feat(environments): add process declaration (#420)
* 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

This comment has been minimized.

Copy link

commented Aug 28, 2018

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

@Wolrab1

This comment has been minimized.

Copy link

commented Aug 28, 2018

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

This comment has been minimized.

Copy link

commented Aug 28, 2018

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

This comment has been minimized.

Copy link

commented Aug 29, 2018

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;
@dwieeb

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2018

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.

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

@dwieeb

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2018

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

This comment has been minimized.

Copy link
Author

commented Aug 30, 2018

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

@Dellos7

This comment has been minimized.

Copy link

commented Aug 30, 2018

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

@luiscarlospando

This comment has been minimized.

Copy link

commented Sep 4, 2018

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

@kyleabens

This comment has been minimized.

Copy link

commented Sep 26, 2018

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

This comment has been minimized.

Copy link

commented Oct 10, 2018

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

@saibotsivad

This comment has been minimized.

Copy link
Author

commented Oct 10, 2018

Sure thing: link

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

@giovannipds

This comment has been minimized.

Copy link

commented Oct 31, 2018

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

This comment has been minimized.

Copy link

commented Oct 31, 2018

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

This comment has been minimized.

Copy link

commented Nov 6, 2018

^ perfect explanation thank you!

trsrm added a commit to powwowinc/ionic-app-scripts-tiny that referenced this issue Jan 2, 2019

Update to 3.2.1 from upstream/master (#1)
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#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.