NG build failing Module parse failed: Unexpected token - nothing has changed

Question

2 days ago we suddently started to get build errors when deploying using gitlab ci. nothing has changed in the build scripts, no versions of NPM, NG or Angular have changed. Same compile commands work fine on our development machines.

    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.2.1
Node: 10.16.2
OS: linux x64
Angular: 8.1.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.801.3
@angular-devkit/build-angular      0.801.3
@angular-devkit/build-optimizer    0.801.3
@angular-devkit/build-webpack      0.801.3
@angular-devkit/core               8.1.3
@angular-devkit/schematics         8.1.3
@angular/cdk                       8.1.2
@angular/cli                       8.2.1
@angular/fire                      5.2.1
@angular/http                      2.4.10
@angular/material                  8.1.2
@angular/material-moment-adapter   8.1.2
@angular/pwa                       0.801.3
@ngtools/webpack                   8.1.3
@schematics/angular                8.1.3
@schematics/update                 0.802.1
rxjs                               6.5.2
typescript                         3.4.5
webpack                            4.35.2

ng-build:
  stage: build
  image: node:10
  script: 
  - node --version
  - npm --version
  - rm -f package-lock.json
  - npm install
  - npm run-script version
  - npm run-script build-ci
  - cd dist && npm pack
  artifacts:
    paths:
    - dist/*.tgz

Even when we try and rerun a previous successful build it now fails with the same error

ERROR in ./src/app/app-routing.module.ts 3:17
Module parse failed: Unexpected token (3:17)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
| import { Routes } from '@angular/router';
| import { AuthGuard } from './core/guards/auth.guard';
> const ɵ0 = () => import("./modules/auth/auth.module.ngfactory").then(mod => mod.AuthModuleNgFactory), ɵ1 = () => import("./modules/property/property.module.ngfactory").then(mod => mod.PropertyModuleNgFactory), ɵ2 = () => import("./modules/privacy/privacy.module.ngfactory").then(mod => mod.PrivacyModuleNgFactory), ɵ3 = () => import("./modules/homepage/homepage.module.ngfactory").then(mod => mod.HomepageModuleNgFactory), ɵ4 = () => import("./modules/calendar/calendar.module.ngfactory").then(mod => mod.CalendarModuleNgFactory), ɵ5 = () => import("./modules/statistics/statistics.module.ngfactory").then(mod => mod.StatisticsModuleNgFactory);
| const routes = [
|     {
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gurubnb-frontend-app@0.0.0 build-ci: `ng build --configuration=ci`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gurubnb-frontend-app@0.0.0 build-ci script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I dont get why something that previously worked would fail with no changes in versions or the code. Expect the build to still work.

Answer 1

This happened also to me. The newer version of webpack (4.39.0) has some peer dependency with an acorn version. The problem is that another package I was using also has this dependency (with an older version), so it was installed first (and for some reason (probably npm related) the webpack dependency was not installed).

So we had two options:

1) Install and downgrade the webpack version.

2) Or for this to work, uninstall the dependency that install acorn first (in my case jspdf ), then do fresh install ( npm install ) and after that, install the removed dependency ( npm install jspdf ).

For checking if this depedency problem also happended to you, you can check the life story of the package with npm ls acorn .

This image represents a problem with acorn:

And this a correct dependency:

Its probably a good option to downgrade, but its also good to know why the problem happened on the first place.

Hope it helps,

Cheers!

Answer 2

Can you double check my tsconfig.json with your. Make sure you have "module": "esnext"

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext", // add this line
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Answer 3

This issue was caused by an issue in webpack and or acorn. I found other like sounding (but not the same issues) and decided to reinstall acorn and updated webpack to 4.39.2 (from 4.35.2) and we are back to building.

Not sure why it suddenly stopped working but the above resolved the issue.