angular-cli: Ionic - Module parse failed: Unexpected token (6:2160)

🐞 Bug report

Command (mark with an x)

  • build

Is this a regression?

Yes kind of

Description

I, we, are upgrading our application’s Angular and Cordova-ios versions and while doing so, if we remove the package-lock.json and fetch all the libraries newly, are facing the following an error when we run afterwards our application doing ionic serve:

[ng] ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
[ng] Module parse failed: Unexpected token (6:2160)

I say we as the problem has been reported on the Ionic forum https://forum.ionicframework.com/t/incompatibility-to-cordova-ios-5-0-0 and Ionic GitHub https://github.com/ionic-team/ionic/issues/17605

🔬 Minimal Reproduction

git clone https://github.com/peterpeterparker/dependencies
cd dependencies
npm install
ionic serve

Note: if you don’t face the error doing the above list of commands, then delete the package-lock.json and fetch the libraries again

rm -r package-lock.json
rm -r node_modules
npm install
ionic serve

🔥 Exception or Error



[ng] ℹ 「wdm」: wait until bundle finished: /
[ng] Date: 2019-02-25T18:32:38.169Z
[ng] Hash: 08ae284aacf49d863a79
[ng] Time: 8871ms
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.8 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 12.5 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.77 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 79.5 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.31 MB [initial] [rendered]
[ng] 
[ng] ERROR in ./node_modules/@ionic/core/dist/esm/es5/ionic.core.js 6:2160
[ng] Module parse failed: Unexpected token (6:2160)
[ng] You may need an appropriate loader to handle this file type.
[ng] |  * Built with http://stenciljs.com
[ng] |  */
[ng] > function n(n,t){return"sc-"+n.t+(t&&t!==c?"-"+t:"")}function t(n,t){return n+(t?"-h":"-s")}function e(n,t){for(var e,r,i=null,o=!1,u=!1,f=arguments.length;f-- >2;)A.push(arguments[f]);for(;A.length>0;){var c=A.pop();if(c&&void 0!==c.pop)for(f=c.length;f--;)A.push(c[f]);else"boolean"==typeof c&&(c=null),(u="function"!=typeof n)&&(null==c?c="":"number"==typeof c?c=String(c):"string"!=typeof c&&(u=!1)),u&&o?i[i.length-1].vtext+=c:null===i?i=[u?{vtext:c}:c]:i.push(u?{vtext:c}:c),o=u}if(null!=t){if(t.className&&(t.class=t.className),"object"==typeof t.class){for(f in t.class)t.class[f]&&A.push(f);t.class=A.join(" "),A.length=0}null!=t.key&&(e=t.key),null!=t.name&&(r=t.name)}return"function"==typeof n?n(t,i||[],E):{vtag:n,vchildren:i,vtext:void 0,vattrs:t,vkey:e,vname:r,i:void 0,o:!1}}function r(n,t,e){void 0===e&&(e={});var r=Array.isArray(t)?t:[t],i=n.document,o=e.hydratedCssClass||"hydrated",u=e.exclude;u&&(r=r.filter(function(n){return-1===u.indexOf(n[0])}));var c=r.map(function(n){return n[0]});if(c.length>0){var a=i.createElement("style");a.innerHTML=c.join()+"{visibility:hidden}."+o+"{visibility:inherit}",a.setAttribute("data-styles",""),i.head.insertBefore(a,i.head.firstChild)}var s=e.namespace||"Ionic";return B||(B=!0,function l(n,t,e){(n["s-apps"]=n["s-apps"]||[]).push(t),e.componentOnReady||(e.componentOnReady=function t(){function e(t){if(r.nodeName.indexOf("-")>0){for(var e=n["s-apps"],i=0,o=0;o<e.length;o++)if(n[e[o]].componentOnReady){if(n[e[o]].componentOnReady(r,t))return;i++}if(i<e.length)return void(n["s-cr"]=n["s-cr"]||[]).push([r,t])}t(null)}var r=this;return n.Promise?new n.Promise(e):{then:e}})}(n,s,n.HTMLElement.prototype)),applyPolyfills(n).then(function(){function t(){r.forEach(function(t){var e;!function r(n){return/\{\s*\[native code\]\s*\}/.test(""+n)}(n.customElements.define)?(e=function(t){return n.HTMLElement.call(this,t)}).prototype=Object.create(n.HTMLElement.prototype,{constructor:{value:e,configurable:!0}}):e=new Function("w","return class extends w.HTMLElement{}")(n),U[s].u(function i(n){var t=C(n),e=t.s,r=d(n[0]);return t.s=function(n){var t=n.mode,i=n.scoped;return function o(n,t,e){return import(
[ng] | /* webpackInclude: /\.entry\.js$/ */
[ng] | /* webpackMode: "lazy" */
[ng] ℹ 「wdm」: Failed to compile.

🌍 Your Environment


Node: v11.9.0
npm: 6.8.0

Anything else relevant?

"dependencies": {
    "@angular/common": "~7.2.6",
    "@angular/core": "~7.2.6",
    "@angular/forms": "~7.2.6",
    "@angular/http": "~7.2.6",
    "@angular/platform-browser": "~7.2.6",
    "@angular/platform-browser-dynamic": "~7.2.6",
    "@angular/pwa": "^0.13.3",
    "@angular/router": "~7.2.6",
    "@angular/service-worker": "~7.2.6",
    "@ionic-native/core": "^5.2.0",
    "@ionic-native/firebase": "^5.2.0",
    "@ionic-native/google-analytics": "^5.2.0",
    "@ionic-native/splash-screen": "^5.2.0",
    "@ionic-native/status-bar": "^5.2.0",
    "@ionic/angular": "^4.0.2",
    "@ionic/storage": "^2.2.0",
    "cordova-ios": "^5.0.0",
    "core-js": "^2.6.5",
    "rxjs": "6.4.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.3",
    "@angular-devkit/build-angular": "~0.13.3",
    "@angular-devkit/core": "~7.3.3",
    "@angular-devkit/schematics": "~7.3.3",
    "@angular/cli": "~7.3.3",
    "@angular/compiler": "~7.2.6",
    "@angular/compiler-cli": "~7.2.6",
    "@angular/language-service": "~7.2.6",
    "@ionic/angular-toolkit": "^1.4.0",
    "@types/node": "~10.12.24",
    "ts-node": "~8.0.2",
    "tslint": "~5.12.1",
    "typescript": "~3.1.6"
  }

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 4
  • Comments: 22 (2 by maintainers)

Most upvoted comments

@alan-agius4 @clydin I tried again and again and finally it worked out 🎉

to double check I even took the time to do update all libs in my client’s project, went with the same process and it went fine too 🎉

therefore I think we could close this issue, thx a lot for the support. I’m curious which lib was the problem but I’m happy with a solution 😉

for the record

rm -rf node_modules
rm -f package-lock.json
npm instal
ionic serve

now is ok.

@piernik, some workarounds are available here https://github.com/webpack/webpack/issues/8656#issuecomment-456010969 and https://github.com/webpack/webpack/issues/8656#issuecomment-456713191

Alternativly, you can downgrade the @angular-devkit/build-angular package to a previous version 0.12.X.

That said, I am going to re-open this, to discuss if we should rollback to an older version of webpack as there was another report of this issue being encountered.

Side note: if we revert back so should will this feature https://github.com/angular/angular-cli/blob/78f5c287d840c1411e2dce028afba3b02c10d868/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts#L296

It’s important to note that this issue is being caused by npm and the actual bug has been around since npm 3. (https://github.com/webpack/webpack/issues/8656#issuecomment-456713191)

The root cause of this is actually npm, and how it dedupes modules. If you use yarn you should not experience this issue.

However, if if webpack do find a workaround and implement it, it will be included in the CLI when we cut another release.