ionic-team / capacitor

Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web ⚡️
https://capacitorjs.com
MIT License
12.11k stars 1k forks source link

TS2717: Subsequent property declarations must have the same type. #1079

Closed maheshstms closed 5 years ago

maheshstms commented 5 years ago

I get the below error and unable to proceed

[ng] ERROR in node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(8,9): error TS2717: Subsequent property declarations must have the same type. Property 'Camera' must be of type 'CameraPlugin', but here has type 'CameraPlugin'. [ng] node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(10,9): error TS2717: Subsequent property declarations must have the same type. Property 'Device' must be of type 'DevicePlugin', but here has type 'DevicePlugin'. [ng] node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(11,9): error TS2717: Subsequent property declarations must have the same type. Property 'Filesystem' must be of type 'FilesystemPlugin', but here has type 'FilesystemPlugin'. [ng] node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(13,9): error TS2717: Subsequent property declarations must have the same type. Property 'Haptics' must be of type 'HapticsPlugin', but here has type 'HapticsPlugin'. [ng] node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(16,9): error TS2717: Subsequent property declarations must have the same type. Property 'Modals' must be of type 'ModalsPlugin', but here has type 'ModalsPlugin'. [ng] node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(19,9): error TS2717: Subsequent property declarations must have the same type. Property 'Photos' must be of type 'PhotosPlugin', but here has type 'PhotosPlugin'. [ng] node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts(23,9): error TS2717: Subsequent property declarations must have the same type. Property 'StatusBar' must be of type 'StatusBarPlugin', but here has type 'StatusBarPlugin'.

Looking at node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts there are other modules for which no ERROR is thrown like GeolocationPlugin, ClipboardPlugin ...

$ grep -inr "CameraPlugin" --include=.ts #Plugin having trouble node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts:8: Camera?: CameraPlugin; node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts:224:export interface CameraPlugin extends Plugin { node_modules/@capacitor/core/dist/esm/web/camera.d.ts:2:import { CameraPlugin, CameraPhoto, CameraOptions } from '../core-plugin-definitions'; node_modules/@capacitor/core/dist/esm/web/camera.d.ts:3:export declare class CameraPluginWeb extends WebPlugin implements CameraPlugin { node_modules/@capacitor/core/dist/esm/web/camera.d.ts:8:declare const Camera: CameraPluginWeb; $ grep -inr "ClipboardPlugin" --include=.ts #Plugin for which no error is shown node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts:9: Clipboard?: ClipboardPlugin; node_modules/@capacitor/core/dist/esm/core-plugin-definitions.d.ts:315:export interface ClipboardPlugin extends Plugin { node_modules/@capacitor/core/dist/esm/web/clipboard.d.ts:2:import { ClipboardPlugin, ClipboardWrite, ClipboardRead, ClipboardReadResult } from '../core-plugin-definitions'; node_modules/@capacitor/core/dist/esm/web/clipboard.d.ts:3:export declare class ClipboardPluginWeb extends WebPlugin implements ClipboardPlugin { node_modules/@capacitor/core/dist/esm/web/clipboard.d.ts:8:declare const Clipboard: ClipboardPluginWeb;

package.json below

{
  "name": "teacher",
  "license": "SEE LICENSE IN <your-license-filename>",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ionic serve",
    "build:web": "ng build",
    "build:ionic": "ng build && npm run cap.copy",
    "build:mobile": "npm run cap.copy && npm run cap.update",
    "build:mobile:ios": "npm run cap.copy && npx cap update ios",
    "build:mobile:android": "npm run cap.copy && npx cap update android",
    "build:prod": "npm run build:web -- --prod && npm run build:mobile",
    "cap.add.ios": "npx cap add ios",
    "cap.add.android": "npx cap add android",
    "cap.ios": "npx cap open ios",
    "cap.android": "npx cap open android",
    "cap.copy": "npx cap copy",
    "cap.update": "npx cap update",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "file:../../node_modules/@angular/animations",
    "@angular/common": "file:../../node_modules/@angular/common",
    "@angular/compiler": "file:../../node_modules/@angular/compiler",
    "@angular/core": "file:../../node_modules/@angular/core",
    "@angular/forms": "file:../../node_modules/@angular/forms",
    "@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
    "@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
    "@angular/router": "file:../../node_modules/@angular/router",
    "@app/store": "file:./src/app/store",
    "@capacitor/android": "^1.0.0-beta.6",
    "@capacitor/cli": "^1.0.0-beta.11",
    "@capacitor/core": "^1.0.0-beta.11",
    "@capacitor/ios": "^1.0.0-beta.3",
    "@ionic-native/core": "file:../../node_modules/@ionic-native/core",
    "@ionic-native/splash-screen": "file:../../node_modules/@ionic-native/splash-screen",
    "@ionic-native/status-bar": "file:../../node_modules/@ionic-native/status-bar",
    "@ionic/angular": "file:../../node_modules/@ionic/angular",
    "@ionic/ng-toolkit": "file:../../node_modules/@ionic/ng-toolkit",
    "@ionic/schematics-angular": "file:../../node_modules/@ionic/schematics-angular",
    "@ngrx/effects": "file:../../node_modules/@ngrx/effects",
    "@ngrx/router-store": "file:../../node_modules/@ngrx/router-store",
    "@ngrx/store": "file:../../node_modules/@ngrx/store",
    "@ngx-translate/core": "file:../../node_modules/@ngx-translate/core",
    "@ngx-translate/http-loader": "file:../../node_modules/@ngx-translate/http-loader",
    "@nrwl/nx": "file:../../node_modules/@nrwl/nx",
    "@portal/ionic": "file:../../xplat/ionic",
    "@portal/scss": "file:../../libs/scss",
    "@portal/web": "file:../../xplat/web",
    "rxjs": "file:../../node_modules/rxjs",
    "rxjs-compat": "file:../../node_modules/rxjs-compat",
    "zone.js": "file:../../node_modules/zone.js"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.7.2",
    "@angular-devkit/build-angular": "0.7.2",
    "@angular-devkit/core": "0.7.2",
    "@angular-devkit/schematics": "0.7.2",
    "@angular/cli": "^6.1.4",
    "@angular/compiler-cli": "file:../../node_modules/@angular/compiler-cli",
    "@angular/language-service": "file:../../node_modules/@angular/language-service",
    "@types/jasmine": "file:../../node_modules/@types/jasmine",
    "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
    "@types/node": "file:../../node_modules/@types/node",
    "codelyzer": "file:../../node_modules/codelyzer",
    "jasmine-core": "file:../../node_modules/jasmine-core",
    "jasmine-spec-reporter": "file:../../node_modules/jasmine-spec-reporter",
    "karma": "file:../../node_modules/karma",
    "karma-chrome-launcher": "file:../../node_modules/karma-chrome-launcher",
    "karma-coverage-istanbul-reporter": "file:../../node_modules/karma-coverage-istanbul-reporter",
    "karma-jasmine": "file:../../node_modules/karma-jasmine",
    "karma-jasmine-html-reporter": "file:../../node_modules/karma-jasmine-html-reporter",
    "protractor": "file:../../node_modules/protractor",
    "ts-node": "file:../../node_modules/ts-node",
    "tslint": "file:../../node_modules/tslint",
    "typescript": "file:../../node_modules/typescript"
  }
}

Please suggest what could be wrong

jcesarmobile commented 5 years ago

Can you share your tsconfig.json?

maheshstms commented 5 years ago

$ cat tsconfig.json { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "extendedDiagnostics": true, "target": "es5", "lib": [ "es2017", "dom" ] } }

The problem solved after replacing to lower versions

$ find node_modules/@capacitor/ -iname package.json | xargs head
==> node_modules/@capacitor//android/package.json <==
{
  "_from": "@capacitor/android@^1.0.0-beta.6",
  "_id": "@capacitor/android@1.0.0-beta.6",
  "_inBundle": false,
  "_integrity": "sha512-pZTmGbyYf491vcf+PFd8qobKOzi2uSHZs7nmg3B1cNqXxQ9g6Z4F4snaNNGJhm2b0rzcC+gBGIoHVAN10jx79A==",
  "_location": "/@capacitor/android",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,

==> node_modules/@capacitor//cli/assets/app-template/package.json <==
{
  "name": "capacitor-app",
  "version": "1.0.0",
  "description": "An Amazing Capacitor App",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "capacitor",

==> node_modules/@capacitor//cli/assets/electron-template/package.json <==
{
  "name": "capacitor-app",
  "version": "1.0.0",
  "description": "An Amazing Capacitor App",
  "main": "index.js",
  "scripts": {
    "electron:start": "electron ./"
  },
  "dependencies": {
    "@capacitor/electron": "^1.0.0-alpha.28",

==> node_modules/@capacitor//cli/assets/plugin-template/package.json <==
{
  "name": "my-capacitor-plugin",
  "version": "0.0.1",
  "description": "Capacitor plugin",
  "homepage": "http://getcapacitor.com/",
  "author": "Ionic Team <hi@ionic.io> (https://ionicframework.com) ",
  "license": "MIT",
  "scripts": {
    "build": "npm run clean && tsc && rollup -c rollup.config.js",
    "clean": "rimraf dist",

==> node_modules/@capacitor//cli/package.json <==
{
  "_from": "@capacitor/cli@^1.0.0-beta.3",
  "_id": "@capacitor/cli@1.0.0-beta.11",
  "_inBundle": false,
  "_integrity": "sha512-F6Q7e1YBUBcwDjaMeXc9F6u/pah637Omc2J18AvB6cl7AonyTX34CdNUtWr1a8o8VdY3B1yg1S5g99UhSPCzqQ==",
  "_location": "/@capacitor/cli",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,

==> node_modules/@capacitor//core/package.json <==
{
  "_from": "@capacitor/core@^1.0.0-beta.3",
  "_id": "@capacitor/core@1.0.0-beta.11",
  "_inBundle": false,
  "_integrity": "sha512-Q0hKWvxFjCl4jVpn+BEbC3suj95eaEhjAXkd5+1++ml5EKW7p6iIPrbAaJqfEo9M08Vk4fcvWCrElqO7m6ly1g==",
  "_location": "/@capacitor/core",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,

==> node_modules/@capacitor//ios/package.json <==
{
  "_from": "@capacitor/ios@^1.0.0-beta.3",
  "_id": "@capacitor/ios@1.0.0-beta.6",
  "_inBundle": false,
  "_integrity": "sha512-184DcPAckZDzB3jYmU2GjS4wx03iTojKf9jivoQ5/rBGMM8nW/b74zRyzEcHlyIpn8NiviN29rC2q8e/mxf9/Q==",
  "_location": "/@capacitor/ios",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,
philmerrell commented 5 years ago

I'm getting this error now since beta.13

philmerrell commented 5 years ago

I was able to fix this. I built a capacitor plugin whose dependency was beta.11, but my app was on beta.13. When I upgraded the capacitor to beta.13 in my plugin to match my app, I was able to build my app just fine. Seems like the problem was beta.11 and beta.13 not playing nice together.

sbannigan commented 5 years ago

still seeing this issue whenever the app version of capacitor is higher than the plugins

sbannigan commented 5 years ago

looks like this might be only an issue for plugins that have a plugin.ts file that imports from @capacitor/core

stewones commented 5 years ago

ts compiler cant resolve the path correctly when you import types from capacitor/core inside a custom plugin

so you end up with this after compiling (npm run build)

// plugin.d.ts
myMethod(options?: PhotosSaveOptions): Promise<import("../../../../../Users/stewan/dev/capacitor-media/node_modules/@capacitor/core/dist/esm/core-plugin-definitions").PhotosSaveResult>;

instead

// plugin.d.ts
 myMethod(options?: PhotosSaveOptions): Promise<import("@capacitor/core").PhotosSaveResult>;
stewones commented 5 years ago

just sorted this out. in my case I didn't type correctly function's return, so ts was adding that crazy path.

once you type everything, the output should be fine

  // plugin.ts - wrong input
  myMethod(options?: PhotosSaveOptions) {
    return MediaPlugin.savePhoto(options);
  }
  // plugin.d.ts - wrong output
myMethod(options?: PhotosSaveOptions): Promise<import("../../../../../Users/stewan/dev/capacitor-media/node_modules/@capacitor/core/dist/esm/core-plugin-definitions").PhotosSaveResult>;
// plugin.ts - correct input
  myMethod(options?: PhotosSaveOptions): Promise<PhotosSaveResult> {
    return MediaPlugin.savePhoto(options);
  }
// plugin.d.ts - correct output
myMethod(options?: PhotosSaveOptions): Promise<PhotosSaveResult>;
muuki88 commented 4 years ago

As done in the PR linked above removing declare global instances fixes the compile errors for me as well.

My setup contains yarn workspaces and declare global { interface Window { ... } } definitions. The error did only occur in some packages, which made this even weirder.

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.