Reputation: 1035

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

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.

Upvotes: 24

Answers (6)

ghiscoding

Reputation: 13214

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

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.
then go into that temp lib folder \node_modules\@types\babel__traverse and simply copy the index.d.ts file
then go into the broken project and overwrite the file (\node_modules\@types\babel__traverse\index.d.ts)

and voilà it works!!!

Edit

As pointed out by @GiffordN in the comments, you could use Yarn resolutions or npm overrides

// yarn
"resolutions": {
  "@types/babel__traverse": "7.0.6"
}

// npm
"overrides": {
  "@types/babel__traverse": "7.0.6"
}

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.

Upvotes: 12

MikeBeaton

Reputation: 3892

The different releases of @types/babel__traverse and @types/babel__core are tagged with the TypeScript versions they support.

Visit https://www.npmjs.com/package/@types/babel__traverse?activeTab=versions and https://www.npmjs.com/package/@types/babel__core?activeTab=versions respectively and look at the tsX.Y tags listed next to each release, for which TypeScript version it supports.

You need to look these up manually (I don't know how to do this automatically, though it feels like there should be a way) and then configure the compatible versions by hand in package.json, e.g.

    "typescript": "^3.9.10",
    "@types/babel__core": "7.1.19",
    "@types/babel__traverse": "7.17.1",

Upvotes: 6

Gifford N.

Reputation: 429

You can add

"resolutions": {
    "@types/babel__traverse": "7.0.6"
}

to your package.json to force "@types/babel__traverse": "*" to resolve to "@types/babel__traverse": "7.0.6".

Methology:

Because @types/babel__core dependencies list contains @types/babel__traverse with a version set to '*' (aka latest) even if you specify a version for @types/babel__traverse in package.json, @types/babel__core will install the latest version of @types/babel__traverse in its own dependency chain.

By using resolutions we can specify strict restrictions for dependencies of dependencies.

Upvotes: 8