Ionic - Module parse failed: Unexpected token (6:2160) #13767

peterpeterparker · 2019-02-25T18:37:53Z

🐞 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 ionic-team/ionic-framework#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


🌍 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"
  }

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2019-02-26T07:53:30Z

Hi thanks for reporting this.

However this seems to be related to a webpack issue webpack/webpack#8656 and npm bug https://npm.community/t/packages-with-peerdependencies-are-incorrectly-hoisted/4794

peterpeterparker · 2019-02-26T15:29:08Z

@alan-agius4 so when the Webpack issue will be solved it will be included in the Cli right?

alan-agius4 · 2019-02-26T17:12:01Z

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.

peterpeterparker · 2019-02-26T17:14:02Z

@alan-agius4 thx for the answer and explanation, really cool. understood 👍

piernik · 2019-02-28T11:28:30Z

I have the same issue. What should I do? fallback to angular@7.2 or maybe npm@6.7.0?
Can I get back to 7.2 using ng update tool?

How can I get rid of this error right now?

alan-agius4 · 2019-02-28T12:11:01Z

@piernik, some workarounds are available here webpack/webpack#8656 (comment) and webpack/webpack#8656 (comment)

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

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

Line 296 in 78f5c28

futureEmitAssets: true,

It’s important to note that this issue is being caused by npm and the actual bug has been around since npm 3. (webpack/webpack#8656 (comment))

piernik · 2019-02-28T13:28:40Z

I got back to 7.2.
I think You should rollback to working version of webpack. I think webpack's newer version is not very important and working cli should always be Your priority.

Edit: for me (and I think for many unexperienced users) angular-cli is a complete tool and I don't care if it is webpack, rxjs or whatever dependent. Every version should work perfectly.

alan-agius4 · 2019-02-28T17:43:27Z

I looked at this a bit more.

And from the reproduction above I managed to get this fixed by removing the package.lock and node_modules and after doing a fresh npm install.

rm -rf node_modules
rm -f package-lock.json
npm install

Executing npm ls acorn should return something like;

dependencies@0.0.1 /workspace/dependencies
└─┬ @angular-devkit/build-angular@0.13.3
  └─┬ webpack@4.29.0
    └── acorn@6.1.1

alan-agius4 · 2019-02-28T17:58:38Z

@piernik & @peterpeterparker can you kindly confirm if this works for you as well?

peterpeterparker · 2019-02-28T18:01:25Z

@alan-agius4 "just" removing package-lock.json doesn't work neither for me (I mean removing and installing again like I describe in my original msg)

Ping me if you need more tests

clydin · 2019-02-28T18:07:41Z

@peterpeterparker Can you try a full clean install as well (i.e., also rm -rf node_modules) in addition to the package-lock.json?

peterpeterparker · 2019-02-28T18:09:42Z

it's what I meant, I do full clean (see the description of the issue)

clydin · 2019-02-28T18:11:24Z

Ah. Sorry. I read the " "just" removing package-lock.json" part.

peterpeterparker · 2019-02-28T18:12:40Z

no worries at all, if I could help with more testing, sure ping me

alan-agius4 · 2019-02-28T18:22:50Z

@peterpeterparker, I tried on another machine, and I am still unable to replicate this issue when remove the node_modules and package-lock.json

dependencies@0.0.1 /Users/alan/git/cli-repos/dependencies
└─┬ @angular-devkit/build-angular@0.13.3
  └─┬ webpack@4.29.0
    └── acorn@6.1.1

peterpeterparker · 2019-02-28T18:24:40Z

@alan-agius4 which node and npm version are u using? you are testing with my demo repo?

alan-agius4 · 2019-02-28T18:29:40Z

Yeah, I trying with your reproduction. I tried the following npm version 6.5.0 & 6.8.0, Node 11.1 and Node 11.8

peterpeterparker · 2019-02-28T18:44:21Z

@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 · 2019-03-01T08:41:25Z

Sadly it is not working for me.
I deleted node_modules folder and lock file (I'm on windows).

I still get appropriate loader error.

Here is npm ls acorn result:

And here is mine package.json

{
  "name": "@infirma/frontend",
  "version": "3.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --extra-webpack-config webpack.extra.js",
    "start:aot": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng serve --aot",
    "build": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --aot --stats-json --build-optimizer --progress=true --extra-webpack-config webpack.extra.js",
    "build:prod": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer --progress=true --extra-webpack-config webpack.extra.js",
    "build:prod:analyzer": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --prod --source-map --stats-json --build-optimizer --progress=true --extra-webpack-config webpack.extra.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-analize": "webpack-bundle-analyzer dist/frontend/stats.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@agm/js-marker-clusterer": "^1.0.0-beta.5",
    "@amcharts/amcharts4": "^4.1.9",
    "@amcharts/amcharts4-geodata": "^4.1.2",
    "@angular/animations": "~7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "~7.2.7",
    "@angular/compiler": "~7.2.7",
    "@angular/core": "~7.2.7",
    "@angular/forms": "~7.2.7",
    "@angular/http": "~7.2.7",
    "@angular/platform-browser": "~7.2.7",
    "@angular/platform-browser-dynamic": "~7.2.7",
    "@angular/router": "~7.2.7",
    "@auth0/angular-jwt": "^2.1.0",
    "@exalif/ngx-breadcrumbs": "^7.0.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.13",
    "@fortawesome/free-brands-svg-icons": "^5.7.0",
    "@fortawesome/pro-light-svg-icons": "^5.7.0",
    "@fortawesome/pro-regular-svg-icons": "^5.7.0",
    "@fortawesome/pro-solid-svg-icons": "^5.7.0",
    "@fullcalendar/bootstrap": "^4.0.0-beta.4",
    "@fullcalendar/core": "^4.0.0-beta.4",
    "@fullcalendar/daygrid": "^4.0.0-beta.4",
    "@fullcalendar/google-calendar": "^4.0.0-beta.4",
    "@fullcalendar/interaction": "^4.0.0-beta.4",
    "@fullcalendar/list": "^4.0.0-beta.4",
    "@fullcalendar/rrule": "^4.0.0-beta.4",
    "@fullcalendar/timegrid": "^4.0.0-beta.4",
    "@google/maps": "^0.5.5",
    "@lukana/alerts": "^0.1.0",
    "@lukana/data-checker": "^0.0.1",
    "@lukana/dropdowns": "^0.0.7",
    "@lukana/loading-indicator": "^0.0.2",
    "@lukana/modals": "^0.1.4",
    "@lukana/paginator": "^0.0.1",
    "@lukana/tooltips": "^0.1.1",
    "@ng-select/ng-select": "^2.15.3",
    "@ngxs/router-plugin": "^3.3.4",
    "@ngxs/store": "^3.3.4",
    "@schemater/bootstrap": "^0.3.0",
    "@schemater/bootstrap-color": "^0.1.1",
    "@schemater/components": "^0.1.2",
    "@schemater/core": "^0.3.1-4",
    "@schemater/datetime": "^0.1.4",
    "@schemater/filter-bar": "^0.2.4",
    "@sentry/browser": "^4.5.3",
    "agm-direction": "^0.7.6",
    "angular-gridster2": "^7.1.0",
    "angular-password-strength-meter": "^0.0.4",
    "angular-sortablejs": "^2.6.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "flag-icon-css": "^3.2.1",
    "http-operators": "^0.0.3",
    "js-marker-clusterer": "^1.0.0",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "ng-animate": "^0.3.4",
    "ng-pick-datetime": "^7.0.0",
    "ng-pick-datetime-moment": "^1.0.8",
    "ngx-bootstrap": "^3.2.0",
    "ngx-build-plus": "^7.7.6",
    "ngx-ckeditor": "^0.4.0",
    "ngx-color-picker": "^7.3.1",
    "ngx-take-until-destroy": "^5.4.0",
    "npm": "^6.7.0",
    "rrule": "^2.6.0",
    "rxjs": "~6.4.0",
    "sortablejs": "^1.8.3",
    "zone.js": "~0.8.29",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.3",
    "@angular/cli": "~7.3.3",
    "@angular/compiler-cli": "~7.2.7",
    "@angular/language-service": "~7.2.7",
    "@ngxs/devtools-plugin": "^3.3.4",
    "@types/ckeditor": "^4.9.5",
    "@types/faker": "^4.1.5",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~10.12.18",
    "codelyzer": "~4.5.0",
    "faker": "^4.1.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.0.1",
    "tslint": "~5.12.1",
    "typescript": "~3.2.4",
    "webpack-bundle-analyzer": "^3.0.3"
  }
}

And ng version

KevinKelchen · 2019-03-15T19:48:37Z

This is what we did to get around it.

MickL · 2019-07-17T09:23:17Z

Removing package-lock.json and node_modules/ worked for me.

├─┬ @angular-devkit/build-angular@0.801.1
│ └─┬ webpack@4.35.2
│   └── acorn@6.2.0

angular-automatic-lock-bot · 2019-09-09T18:41:10Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

peterpeterparker mentioned this issue Feb 25, 2019

Ionic build project broken for @angular-devkit/architect and @angular-devkit/build-angular version 0.13.x ionic-team/ionic-framework#17605

Closed

alan-agius4 closed this as completed Feb 26, 2019

alan-agius4 mentioned this issue Feb 28, 2019

Lazy loaded libraries stopped working after update to 7.3 #13793

Closed

alan-agius4 reopened this Feb 28, 2019

alan-agius4 added the needs: discussion On the agenda for team meeting to determine next steps label Feb 28, 2019

mgechev removed the needs: discussion On the agenda for team meeting to determine next steps label Feb 28, 2019

peterpeterparker closed this as completed Feb 28, 2019

alexzuza mentioned this issue Jul 4, 2019

After update to Angular 8, webpack won't process lazy loaded routes (even with correct syntax) angular/angular#31421

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ionic - Module parse failed: Unexpected token (6:2160) #13767

Ionic - Module parse failed: Unexpected token (6:2160) #13767

peterpeterparker commented Feb 25, 2019 •

edited

🌍 Your Environment

alan-agius4 commented Feb 26, 2019

peterpeterparker commented Feb 26, 2019

alan-agius4 commented Feb 26, 2019

peterpeterparker commented Feb 26, 2019

piernik commented Feb 28, 2019

alan-agius4 commented Feb 28, 2019 •

edited

piernik commented Feb 28, 2019 •

edited

alan-agius4 commented Feb 28, 2019 •

edited

alan-agius4 commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019 •

edited

clydin commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019

clydin commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019

alan-agius4 commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019

alan-agius4 commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019 •

edited

piernik commented Mar 1, 2019

KevinKelchen commented Mar 15, 2019

MickL commented Jul 17, 2019 •

edited

angular-automatic-lock-bot bot commented Sep 9, 2019

Ionic - Module parse failed: Unexpected token (6:2160) #13767

Ionic - Module parse failed: Unexpected token (6:2160) #13767

Comments

peterpeterparker commented Feb 25, 2019 • edited

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

alan-agius4 commented Feb 26, 2019

peterpeterparker commented Feb 26, 2019

alan-agius4 commented Feb 26, 2019

peterpeterparker commented Feb 26, 2019

piernik commented Feb 28, 2019

alan-agius4 commented Feb 28, 2019 • edited

piernik commented Feb 28, 2019 • edited

alan-agius4 commented Feb 28, 2019 • edited

alan-agius4 commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019 • edited

clydin commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019

clydin commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019

alan-agius4 commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019

alan-agius4 commented Feb 28, 2019

peterpeterparker commented Feb 28, 2019 • edited

piernik commented Mar 1, 2019

KevinKelchen commented Mar 15, 2019

MickL commented Jul 17, 2019 • edited

angular-automatic-lock-bot bot commented Sep 9, 2019

peterpeterparker commented Feb 25, 2019 •

edited

Command (mark with an `x`)

alan-agius4 commented Feb 28, 2019 •

edited

piernik commented Feb 28, 2019 •

edited

alan-agius4 commented Feb 28, 2019 •

edited

peterpeterparker commented Feb 28, 2019 •

edited

peterpeterparker commented Feb 28, 2019 •

edited

MickL commented Jul 17, 2019 •

edited