`"moduleResolution": "node12"` of Typescript 4.5 does not work as expected

[JounQin]

I just tried the typescript@next and moduleResolution: 'node12' with @angular/compiler@v13, but tsc -b failed to build:

src/index.ts:1:15 - error TS2305: Module '"@angular/compiler"' has no exported member 'ParsedTemplate'.

1 import type { ParsedTemplate } from '@angular/compiler'
                ~~~~~~~~~~~~~~

src/index.ts:1:37 - error TS1471: Module '@angular/compiler' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.

1 import type { ParsedTemplate } from '@angular/compiler'
                                      ~~~~~~~~~~~~~~~~~~~

src/index.ts:2:30 - error TS7016: Could not find a declaration file for module 'synckit'. '/Users/JounQin/Workspaces/Local/test/node_modules/synckit/lib/index.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/synckit` if it exists or add a new declaration (.d.ts) file containing `declare module 'synckit';`

2 import { createSyncFn } from 'synckit'
                               ~~~~~~~~~

src/worker.ts:1:15 - error TS2305: Module '"@angular/compiler"' has no exported member 'ParsedTemplate'.

1 import type { ParsedTemplate } from '@angular/compiler'
                ~~~~~~~~~~~~~~

src/worker.ts:1:37 - error TS1471: Module '@angular/compiler' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.

1 import type { ParsedTemplate } from '@angular/compiler'
                                      ~~~~~~~~~~~~~~~~~~~

src/worker.ts:2:29 - error TS7016: Could not find a declaration file for module 'synckit'. '/Users/JounQin/Workspaces/Local/test/node_modules/synckit/lib/index.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/synckit` if it exists or add a new declaration (.d.ts) file containing `declare module 'synckit';`

2 import { runAsWorker } from 'synckit'
                              ~~~~~~~~~

src/worker.ts:5:11 - error TS2339: Property 'parseTemplate' does not exist on type 'typeof import("/Users/JounQin/Workspaces/Local/test/node_modules/@angular/compiler/index")'.

5   const { parseTemplate } = await import('@angular/compiler')
            ~~~~~~~~~~~~~


Found 7 errors.

@angular/compiler@v13 is ESM only, ParsedTemplate is typing exported from its types entry.

See https://unpkg.com/browse/@angular/compiler@13.0.0-rc.0/package.json

synckit is both commonjs and ESM compatible.

See https://unpkg.com/browse/synckit@0.6.0/package.json

I have no idea how can it be fixed on my side.

---

Test source codes:

// worker.ts
import type { ParsedTemplate } from '@angular/compiler'
import { runAsWorker } from 'synckit'

runAsWorker<ParsedTemplate>(async (code: string, filePath: string) => {
  const { parseTemplate } = await import('@angular/compiler')
  return parseTemplate(code, filePath, {
    preserveWhitespaces: true,
    preserveLineEndings: true,
    collectCommentNodes: true,
  })
})

Originally posted by @JounQin in #45884 (comment)

[MartinJohns]

Issue template for bug reports. Although this looks more like a question, better suited for sites like StackOverflow.

[JounQin]

It is created by Reference in new issue feature of GitHub from #45884 (comment).

[weswigham]

synckit has a lib/index.d.ts which matches up to lib/index.js - its esm entrypoint. However, you're importing from a cjs mode file, so the exports map isn't resolving to that, it's resolving to lib/index.cjs instead, and there's no lib/index.d.cts to describe it, hence the error. synckit can either provide a lib/index.d.cts with its' cjs entrypoint shape, or it can provide a types condition that overrides the types we look up.

@angular/compiler is esm only - your errors tell me you're importing it in a cjs mode file. So that's an issue. Second, @angular/compiler is borked. What do I mean by that? Their declaration files are esm mode (as indicated by package.json, but their internal imports don't include any extensions! Their index.d.ts is just export * from "./compiler" - "./compiler" doesn't resolve under esm resolution rules, hence why there's no parseTemplate member. Whoever went and added the types condition to their export map didn't actually check that their types were esm resolution compatible.

[JounQin]

@weswigham Thanks for reply.

I tried the following locally for synckit in node_modules:

{
  "exports": {
    "import": "./lib/index.js",
    "require": "./lib/index.cjs",
    "types": "./lib/index.d.ts"
  }
}

This still does not work, is there anything wrong?

src/index.ts:2:30 - error TS1471: Module 'synckit' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.

2 import { createSyncFn } from 'synckit'
                               ~~~~~~~~~

src/worker.ts:2:29 - error TS1471: Module 'synckit' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.

2 import { runAsWorker } from 'synckit'
                              ~~~~~~~~~

---

@angular/compiler is esm only - your errors tell me you're importing it in a cjs mode file. So that's an issue.

But I'm using await import() in commonjs.

Did you mean something like export * from "./compiler" - "./compiler.js" is required?

[JounQin]

I tried to use worker.cts instead of worker.ts with "type": "module" today, the errors from synckit reduced, but there is still:

src/worker.cts:1:29 - error TS1471: Module 'synckit' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.

1 import { runAsWorker } from 'synckit'

I've tried the following in node_modules/synckit/package.json

{
  "exports": {
    "import": "./lib/index.js",
    "require": "./lib/index.cjs",
    "types": "./lib/index.d.ts"
  }
}

I still don't understand how to fix this part.

See https://github.com/JounQin/test/tree/ts_esm for reproduction

cc @weswigham @DanielRosenwasser

[weswigham]

types must appear above the other conditions in the exports map.

[weswigham]

(But actually, since there's a separate cjs and esm entry point, I'd delete the types condition entirely and just add an index.d.cts)

[andrewbranch]

I've made a note to discuss options for validating / issuing suggestions/diagnostics on package.json files, because that seems like a very easy mistake to make.

In the meantime, it sounds like things are working as expected here. @weswigham correct me if I’m wrong, but I think we can close this? @JounQin questions/discussion is welcome to continue, just trying to parse this to see if we need to assign out any immediate work.

[andrewbranch]

More direct discussion of export map priorities being a footgun at #46334

[weswigham]

Yeah, I don't think there's anything actionable for us here.