Angular: node_modules/@types/babel _traverse/index.d.ts(1137,43): error TS1109: Expression expected

Question

I am currently stucked in very weird issue in Angular. I was working on one my branch a week ago it was fine and building correctly. But I don't know how it start complaing during 'ng build' below is the error I am keep getting today:

node_modules/@types/babel__traverse/index.d.ts(1136,44): error TS1109: Expression expected.
node_modules/@types/babel__traverse/index.d.ts(1137,21): error TS1109: Expression expected.
node_modules/@types/babel__traverse/index.d.ts(1137,37): error TS1005: ';' expected.
node_modules/@types/babel__traverse/index.d.ts(1137,43): error TS1109: Expression expected.
node_modules/@types/babel__traverse/index.d.ts(1139,1): error TS1128: Declaration or statement expected.

I tried below options to fix this but didn't get any success:

Option 1 - removing and installing node_modules, Option 2 - removing and installing @types/babel_traverse

Can anyone let me know what could be the reason. Here are my local angular/dependancy installed versions:

Angular CLI: 7.3.10
Node: 8.15.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.10
@angular-devkit/build-angular      0.13.9
@angular-devkit/build-ng-packagr   0.13.9
@angular-devkit/build-optimizer    0.13.9
@angular-devkit/build-webpack      0.13.9
@angular-devkit/core               7.3.10
@angular-devkit/schematics         7.3.10
@angular/cdk                       7.3.7
@angular/cli                       7.3.10
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.9
@schematics/angular                7.3.10
@schematics/update                 0.13.10
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.2.1
webpack                            4.29.0

Please note that I can't update anything at this point because my project is already in production.

Many thanks in advance.

Answer 1

Try updating the Typescript to a newer version. Worked for me.

"typescript" - "^3.4.2"

Answer 2

I had the same problem and I found a way to bypass the issue but I have to warn, it's a patch not a fix. The way to get over this is simple, just download/install an older version of @types/babel__traverse following these steps

1. install an older version (I used 7.0.6) by running the command npm install @types/[email protected]
   • Note: you might want to install that in a separate project or folder so that running a full npm install won't overwrite it to the latest version again.
2. then go into that temp lib folder \node_modules\@types\babel__traverse and simply copy the index.d.ts file
3. then go into the broken project and overwrite the file (\node_modules\@types\babel__traverse\index.d.ts)

and voilà it works!!!

Q & A

[Q] So why do we have to do that?

[A] It's very simple, the index.d.ts file produced by TypeScript older than 3.5.x is quite different (its structure is different) compare to newer TypeScript > 3.5.x

[Q] Ok but why can't I just add @types/babel__traverse to my package.json and be done with it?

[A] Because the Babel team decided to use "@types/babel__traverse": "*" and that little * means always download latest version... in other words, Thanks You Babel Team I'm not so happy (sic) to report that you broke my code by being explicit to always use your latest version :( ...and here's the proof, taken from my yarn.lock file

"@types/babel__core@^7.1.0":
  version "7.1.10"
  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.10.tgz#ca58fc195dd9734e77e57c6f2df565623636ab40"
  integrity sha512-x8OM8XzITIMyiwl5Vmo2B1cR1S1Ipkyv4mdlbJjMa1lmuKvKY9FrBbEANIaMlnWn5Rf7uO+rC/VgYabNkE17Hw==
  dependencies:
    "@babel/parser" "^7.1.0"
    "@babel/types" "^7.0.0"
    "@types/babel__generator" "*"
    "@types/babel__template" "*"
    "@types/babel__traverse" "*"

Take a look at the last line with * ­­­­­­↑

Final Word

In Conclusion, the real fix is to update your TypeScript to version newer than 3.5.x but if you can't (like me), well then follow the 3 steps I wrote and you'll be back in business.