@Babel/Runtime causes an error with webpack

[rosunad]

Following the tutorial (https://angular-meteor.com/tutorials/whatsapp2/ionic/setup) I'm facing a problem that I'm stuck with.

When I add @babel/runtime at meteor server, the next time I run 'ionic serve' I get an error about webpack.

Meteor version 1.6.1.3.

This is the error that give me Meteor:

Error: The @babel/runtime npm package could not be found in your node_modules
W20180620-13:17:22.858(2)? (STDERR) directory. Please run the following command to install it:
W20180620-13:17:22.858(2)? (STDERR)
W20180620-13:17:22.858(2)? (STDERR)   meteor npm install --save @babel/runtime

After add @babel/runtime, 'ionic serve' give me:

transpile started ...
There was an error in config file "/home/rosunad/projects/protocoloMeteor/webpack.config.js". Using defaults instead.
{ Error: Cannot find module 'webpack'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/rosunad/projects/protocoloMeteor/webpack.config.js:11:15)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3) code: 'MODULE_NOT_FOUND' }
[13:33:45]  typescript: node_modules/@types/meteor/mongo.d.ts, line: 49
            ';' expected.

      L48:  $all?: T[],
      L49:  $elemMatch?: T extends {} ? Query<T> : FieldExpression<T>,
      L50:  $size?: number,

I've created a Github repo, the last commit is just before you need to import @babel/runtime

https://github.com/rosunad/protocoloMeteor

[ardatan]

Are you sure you've installed npm dependencies using meteor npm install for meteor and npm install for webpack?

[rosunad]

Yes, I did it with meteor npm.

Anyway, in the tutorial, using Meteor 1.6 RC7 ask to install the packages with npm. But using 1.6.1.3, as you can read in the console's output, ask to install with meteor npm

[ardatan]

@rosunad could you share your package.json?

[rosunad]

Sure

{
  "name": "protocoloMeteor",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "meteor-client:bundle": "meteor-client bundle -s api"
  },
  "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",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "babel-runtime": "^6.26.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "meteor-node-stubs": "^0.4.1",
    "meteor-rxjs": "^0.4.14",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "@types/meteor": "^1.4.16",
    "tmp": "0.0.33",
    "typescript": "^2.9.2",
    "typescript-extends": "^1.0.1"
  },
  "description": "An Ionic project",
  "config": {
    "ionic_webpack": "./webpack.config.js"
  }
}

[ardatan]

You don't have @babel/runtime and webpack in your package.json. You need to install both, and try again.

[rosunad]

After install @babel/runtime and webpack packages the initial error has dissapeared but I still received the rest of the error message:

[08:33:47]  transpile started ...
[08:33:51]  typescript: node_modules/@types/meteor/mongo.d.ts, line: 49
            ';' expected.

      L48:  $all?: T[],
      L49:  $elemMatch?: T extends {} ? Query<T> : FieldExpression<T>,
      L50:  $size?: number,

[08:33:51]  typescript: node_modules/@types/meteor/mongo.d.ts, line: 49
            Property or signature expected.

      L48:  $all?: T[],
      L49:  $elemMatch?: T extends {} ? Query<T> : FieldExpression<T>,
      L50:  $size?: number,

[08:33:51]  typescript: node_modules/@types/meteor/mongo.d.ts, line: 49
            Declaration or statement expected.

..........and much more in the same way

So, part of the problem was mongo.d.ts. I was using @types/meteor 1.4.16 version so I tried with one older (1.4.14) and everything is working now.

Thank you!