search

ionic-team / capacitor

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

Transpile error after import capacitor/core #1526

Closed SeanStayn closed 5 years ago

SeanStayn commented 5 years ago

Description of the problem: I get a transpile error after import capacitor/core in the app.component.ts

Error:

Thomass-Mac-Pro:quest thomas$ ionic build

ionic-app-scripts build [15:14:32] ionic-app-scripts 3.2.2 [15:14:32] build dev started ... [15:14:32] clean started ... [15:14:32] clean finished in 5 ms [15:14:32] copy started ... [15:14:32] deeplinks started ... [15:14:32] deeplinks finished in 31 ms [15:14:32] transpile started ... [15:14:37] typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 '=' expected.

   L2:  declare var Capacitor: _Capacitor;
   L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
   L4:  export { Capacitor, Plugins };

[15:14:37] typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 Cannot find name 'import'.

   L2:  declare var Capacitor: _Capacitor;
   L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
   L4:  export { Capacitor, Plugins };

[15:14:37] typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 Property 'PluginRegistry' does not exist on type '"./core-plugin-definitions"'.

   L2:  declare var Capacitor: _Capacitor;
   L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
   L4:  export { Capacitor, Plugins };

[15:14:37] ionic-app-script task: "build" [15:14:37] Error: Failed to transpile program Error: Failed to transpile program at new BuildError (/Users/thomas/Documents/Again/quest/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) at /Users/thomas/Documents/Again/quest/node_modules/@ionic/app-scripts/dist/transpile.js:159:20 at new Promise () at transpileWorker (/Users/thomas/Documents/Again/quest/node_modules/@ionic/app-scripts/dist/transpile.js:107:12) at Object.transpile (/Users/thomas/Documents/Again/quest/node_modules/@ionic/app-scripts/dist/transpile.js:64:12) at /Users/thomas/Documents/Again/quest/node_modules/@ionic/app-scripts/dist/build.js:109:82 [ERROR] An error occurred while running subprocess ionic-app-scripts.

    ionic-app-scripts build exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

Affected platform

OS of the development machine

Other information: package.json file:

{
  "name": "quest",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "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/android": "^1.0.0-beta.25",
    "@capacitor/cli": "1.0.0-beta.25",
    "@capacitor/core": "^1.0.0-beta.25",
    "@capacitor/ios": "^1.0.0-beta.25",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/splash-screen": "~4.20.0",
    "@ionic-native/status-bar": "~4.20.0",
    "@ionic/storage": "2.2.0",
    "ionic-angular": "3.9.5",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.2",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

Capacitor version: 1.0.0-beta.25

node version: 10.15.3

npm version: 6.4.1

Steps to reproduce:

  1. ionic start quest blank --type=ionic-angular --capacitor
  2. ionic build
  3. npx cap copy
  4. add import { Plugins } from '@capacitor/core'; to app.component.ts
  5. ionic build

Fully ionic info:

Ionic:

ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic) Ionic Framework : ionic-angular 3.9.5 @ionic/app-scripts : 3.2.2

Capacitor:

capacitor (Capacitor CLI) : 1.0.0-beta.25 @capacitor/core : 1.0.0-beta.25

System:

NodeJS : v10.15.3 (/usr/local/bin/node) npm : 6.4.1 OS : macOS High Sierra

jcesarmobile commented 5 years ago

Try updating typescript to 2.9 or newer

SeanStayn commented 5 years ago

The update to version 2.9.2 solves the problem, but now I get the following warning:

npm WARN @angular/compiler-cli@5.2.11 requires a peer of typescript@>=2.4.2 <2.7 but none is installed. You must install peer dependencies yourself.

How can I solve this warning? I use Ionic 3 and with it angular 5. Is it okay to update angular to version 6, while using Ionic 3?

jcesarmobile commented 5 years ago

Is it just a warning or does something break? If everything works just ignore it. The example app uses compiler-cli 5.0.1 and it works fine, but I didn’t check it it shows the warning. No idea about updating to angular 6, sorry

SeanStayn commented 5 years ago

thank you so much! :) happy weekend.

Kaoschuks commented 5 years ago

Please I need help on this

USTOCKInc commented 4 years ago

I use Visual Studio Code (VSCode) and chrome. I had the same issue, and never solved it. However, I've found that it compiles fine when I just save my code in VSCode again and again and so on! BTW I have no idea why it works if someone share us why?

edgarnsr commented 4 years ago

@jabiinfante I updated to 2.9.2 but now when I build in android with "ionic build --prod" shows me error: Cannot find module “.”

jcesarmobile commented 4 years ago

Have you tried updating @ionic/app-scripts to latest?

edgarnsr commented 4 years ago

Still not working. The version to updated is 3.2.3 because the latest show this error: https://forum.ionicframework.com/t/cannot-find-type-definition-file-for-types/164794 With "ionic build" everything it is ok

jcesarmobile commented 4 years ago

then you should report it on the ionic repo so it can be fixed (first check if somebody already did)

kustrun commented 4 years ago

@edgarnsr Had same problem. If I update typescript to 2.9.2 I get the same problem when running ionic build --prod. According to their Github the problem is only resolved if using version 2.7.1 of typescript which does not work with Capacitor...

Madhulika08 commented 4 years ago

Hi,

I am getting the same problem on running ionic build. I have updated to typescript to 2.9.2 and @ionic/app-scripts : 3.2.3.

What else can i do?

Ionic Info:

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

Capacitor:

capacitor (Capacitor CLI) : 1.1.0 @capacitor/core : 1.1.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) Cordova Platforms : android 6.3.0, ios 4.5.5 Cordova Plugins : no whitelisted plugins (13 plugins total)

System:

ios-deploy : 2.0.0 NodeJS : v8.10.0 (/usr/local/bin/node) npm : 6.4.1 OS : macOS High Sierra Xcode : Xcode 10.1 Build version 10B61

Error : [18:03:46] typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 Type expected. 

   L2:  declare var Capacitor: _Capacitor;
   L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
   L4:  export { Capacitor, Plugins };

[18:03:46] typescript: node_modules/@capacitor/core/dist/esm/global.d.ts, line: 3 Property 'PluginRegistry' does not exist on type 'Promise<typeof "/Users/Mobility/Documents/Madhulika/Capacitor/Passman Capacitor/node_modules/@cap...'. 

   L2:  declare var Capacitor: _Capacitor;
   L3:  declare const Plugins: import("./core-plugin-definitions").PluginRegistry;
   L4:  export { Capacitor, Plugins };

[18:03:46] ionic-app-script task: "build" [18:03:46] Error: Failed to transpile program Error: Failed to transpile program at new BuildError (/Users/Mobility/Documents/Madhulika/Capacitor/Passman Capacitor/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28) at /Users/Mobility/Documents/Madhulika/Capacitor/Passman Capacitor/node_modules/@ionic/app-scripts/dist/transpile.js:159:20 at new Promise () at transpileWorker (/Users/Mobility/Documents/Madhulika/Capacitor/Passman Capacitor/node_modules/@ionic/app-scripts/dist/transpile.js:107:12) at Object.transpile (/Users/Mobility/Documents/Madhulika/Capacitor/Passman Capacitor/node_modules/@ionic/app-scripts/dist/transpile.js:64:12) at /Users/Mobility/Documents/Madhulika/Capacitor/Passman Capacitor/node_modules/@ionic/app-scripts/dist/build.js:109:82 at [ERROR] An error occurred while running subprocess ionic-app-scripts.

    ionic-app-scripts build exited with exit code 1.
Kaoschuks commented 4 years ago

i used

ionic build --optimizejs --minifycss --minifyjs for now till they fix this issue

MikeyBeLike commented 4 years ago

Updating to typescript 2.9.2 worked fine for me. Using angular 5.0.0 & ionic-angular 3.9.5

Kaoschuks commented 4 years ago

Updating to typescript 2.9.2 worked fine for me. Using angular 5.0.0 & ionic-angular 3.9.5

can we see your package.json

MikeyBeLike commented 4 years ago 
{
  "name": "online-site",
  "version": "2.7.0",
  "description": "An Ionic project",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "dev": "ionic serve",
    "build": "ionic-app-scripts build && npm run generate:cache-manifest && node ./build/add-version.js",
    "firebase": "MY_ENV=firebase npm run build --prod && firebase deploy",
    "generate:cache-manifest": "node build/workbox.js",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "lint": "ionic-app-scripts lint",
    "app:serve": "MY_ENV=app ionic-app-scripts serve",
    "app:build": "MY_ENV=app ionic-app-scripts build && cap copy && cap open ios"
  },
  "dependencies": {
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@capacitor/cli": "^1.1.0",
    "@capacitor/core": "^1.1.0",
    "@capacitor/ios": "^1.1.0",
    "@ionic/storage": "2.1.3",
    "angular2-jwt": "^0.2.3",
    "angularfire2": "^4.0.0-rc.1",
    "firebase": "^3.9.0",
    "font-awesome": "^4.7.0",
    "ionic-angular": "^3.9.5",
    "ionicons": "3.0.0",
    "lodash.find": "^4.6.0",
    "lodash.findindex": "^4.6.0",
    "ng-lazyload-image": "^3.2.2",
    "ng2-select": "^1.2.0",
    "ng2-validation": "^4.2.0",
    "ngx-sharebuttons": "^3.0.0",
    "promise-polyfill": "6.0.2",
    "rxjs": "5.5.2",
    "socket.io-client": "^2.0.3",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.8",
    "@types/node": "^10.5.0",
    "@types/socket.io-client": "^1.4.32",
    "firebase-tools": "^6.6.0",
    "git-rev-sync": "^1.12.0",
    "typescript": "2.9.2",
    "workbox-build": "^2.0.1"
  },
  "config": {
    "ionic_sass": "./config/sass.js",
    "ionic_copy": "./config/copy.js",
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_webpack": "./config/webpack.config.js"
  },
  "cordova": {
    "platforms": [
      "android",
      "ios"
    ],
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    }
  }
}
Kaoschuks commented 4 years ago

capacitor build and the app is running fine not blank page on the app load for android or ios??

MikeyBeLike commented 4 years ago

I only get blank page when I use the -prod flag, other than that it runs fine

Kaoschuks commented 4 years ago

I only get blank page when I use the -prod flag, other than that it runs fine

Thats what am saying --prod flag give serious error so rather than using it i suggested

ionic build --optimizejs --minifycss --minifyjs to ensure your javascript and css are minified as they would be on --prod been added just only --aot that is called during --prod build is not used cause I figured that was what was causing the build failure

MikeyBeLike commented 4 years ago

I only get blank page when I use the -prod flag, other than that it runs fine

Thats what am saying --prod flag give serious error so rather than using it i suggested

ionic build --optimizejs --minifycss --minifyjs to ensure your javascript and css are minified as they would be on --prod been added just only --aot that is called during --prod build is not used cause I figured that was what was causing the build failure

Ahh sorry, missed that part, good advice then!

Kaoschuks commented 4 years ago

I only get blank page when I use the -prod flag, other than that it runs fine

Thats what am saying --prod flag give serious error so rather than using it i suggested ionic build --optimizejs --minifycss --minifyjs to ensure your javascript and css are minified as they would be on --prod been added just only --aot that is called during --prod build is not used cause I figured that was what was causing the build failure

Ahh sorry, missed that part, good advice then!

We are all here to learn if you have something better I would rush to use it. I have about three apps that is currently not release because of this issue. @ionic-team please fix this issue I am on my kneels its very important. Cant a backward fix be done to the core capacitor app to solve this issue.

renatop7 commented 4 years ago

Did you find any fix for this issue @Kaoschuks ? I'm in the same situation as you...

NitinMohanSharma commented 4 years ago

Try updating typescript to 2.9 or newer

Hey there, I am having same issue. I updated TS to 2.9.2 with app-script 3.2.2 and ionic cli 3.20, but still having the same error. It is like a nightmare. I need help on this.

CarlosFJ commented 4 years ago

In Plugins -> global.d.ts This work for me

import { Capacitor as _Capacitor } from './definitions'; import * as _Plugins from "./core-plugin-definitions"; declare const Capacitor: _Capacitor;

declare const Plugins: _Plugins.PluginRegistry; export { Capacitor, Plugins };

ashishvadhwa commented 4 years ago

Thanks @CarlosFJ its works for me thanks man you save my day.

CarlosFJ commented 4 years ago

Other solution: upgrade your typescript version 3.7.2

charvee21 commented 3 years ago

Thanks @CarlosFJ It worked for me.

ipehimanshu commented 2 years ago

i am facing same issue with capacitor 3, any solution ?

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.