Search code examples
ionic-frameworkionic3capacitor

error building `ionic-angular` app with `capacitor`


I'm trying to follow this tutorial: https://www.joshmorony.com/using-google-maps-and-geolocation-in-ionic-with-capacitor/

If I use the following steps to create the project

ionic start gmap3 blank --type=ionic-angular --no-link && cd ./gmap3
npm install @types/googlemaps --save-dev
ionic generate component GoogleMaps
npm run build   # OK

# install capacitor
npm install --save @capacitor/cli @capacitor/core
# npm uninstall --save cordova-plugin-splashscreen
npx cap init gmap com.example.gmap
npm run build   # ERROR after adding @capacitor/core

I get the following error AFTER I add capacitor the the project:

[11:19:12]  transpile started ... 
[11:19:16]  typescript: node_modules/@types/node/index.d.ts, line: 194 
            Subsequent variable declarations must have the same type. Variable 'process' must be of type '{ env: { [key: 
            string]: string; }; }', but here has type 'Process'. 

     L193:  interface RequireResolve {
     L194:      (id: string, options?: { paths?: string[]; }): string;
     L195:      paths(request: string): string[] | null;

[11:19:16]  ionic-app-script task: "build" 
[11:19:16]  Error: Failed to transpile program 
Error: Failed to transpile program
    at new BuildError (/dev/ionic3/gmap3/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
    at /dev/ionic3/gmap3/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
    at new Promise (<anonymous>)
    at transpileWorker (/dev/ionic3/gmap3/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
    at Object.transpile (/dev/ionic3/gmap3/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
    at /dev/ionic3/gmap3/node_modules/@ionic/app-scripts/dist/build.js:109:82
    at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ionic-app-scripts build`
npm ERR! Exit status 1

But I can clone a github repo (modified with the same package.json) and it builds fine. see: https://github.com/mixuala/ionic3-gmaps.git

  git clone https://github.com/mixuala/ionic3-gmaps.git gmap3.2
  cd gmap3.2
  npm install
  npm run build

why is that???

Here is the 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",
    "@ionic-native/core": "~4.12.0",
    "@ionic-native/splash-screen": "~4.12.0",
    "@ionic-native/status-bar": "~4.12.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.0",
    "@types/googlemaps": "^3.30.12",
    "typescript": "~2.6.2"
  },

Solution

  • This is a known issue in the @ionic/cli repo. Please see #3541.

    It can be solved adding "types": [] to the "compilerOptions" parameter of the file tsconfig.json.