Angular Migrate from v12 to v13: Module <typescript> can only be default-imported using the 'allowSyntheticDefaultImports' flag

Question

After upgrading from v12 to v13 I get the following messages when trying to ng serve. If I setup a whole new project with v13 everything works. I have already tried compare the config files (tsconfig, angular.json,...) with vimdiff and haven't found any big difference.

Error: node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/compiler_host.d.ts:9:8 - error TS1259: Module '"/project/node_modules/typescript/lib/typescript"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

9 import ts from 'typescript';
         ~~

  node_modules/typescript/lib/typescript.d.ts:7478:1
    7478 export = ts;
         ~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


Error: node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/logical.d.ts:9:8 - error TS1259: Module '"/project/node_modules/typescript/lib/typescript"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

9 import ts from 'typescript';
         ~~

  node_modules/typescript/lib/typescript.d.ts:7478:1
    7478 export = ts;
         ~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.


Error: node_modules/@angular/compiler-cli/src/ngtsc/file_system/src/util.d.ts:9:8 - error TS1259: Module '"/project/node_modules/typescript/lib/typescript"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

9 import ts from 'typescript';
         ~~

  node_modules/typescript/lib/typescript.d.ts:7478:1
    7478 export = ts;
         ~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Here are the installed packages:

├── __ngcc_entry_points__.json@ extraneous
├── @angular-devkit/build-angular@13.1.2
├── @angular/animations@13.1.1
├── @angular/cli@13.1.2
├── @angular/common@13.1.1
├── @angular/compiler-cli@13.1.1
├── @angular/compiler@13.1.1
├── @angular/core@13.1.1
├── @angular/forms@13.1.1
├── @angular/localize@13.1.1
├── @angular/platform-browser-dynamic@13.1.1
├── @angular/platform-browser@13.1.1
├── @angular/router@13.1.1
├── @types/jasmine@3.10.2
├── @types/node@12.20.37
├── eslint@8.6.0
├── jasmine-core@3.10.1
├── jasmine-spec-reporter@7.0.0
├── karma-chrome-launcher@3.1.0
├── karma-coverage@2.0.3
├── karma-firefox-launcher@2.1.2
├── karma-jasmine-html-reporter@1.7.0
├── karma-jasmine@4.0.1
├── karma@6.3.9
├── protractor@7.0.0
├── rxjs@7.4.0
├── ts-node@8.3.0
├── tslib@2.3.1
├── typescript@4.4.4
├── webpack-bundle-analyzer@4.5.0
└── zone.js@0.11.4

Answer 1

Do you have these in your tsconfig.json, inside "compilerOptions" prop:

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strictPropertyInitialization": false