microsoft / microsoft/TypeScript

Module Resolution: imports with JSON assertion should not need flag when module is esnext

Open
#54,929 7 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Needs Proposal Suggestion
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
1d 19h
Merged PRs (30d)
117

Description

Demo Repo

https://github.com/tminuscode/resolve-json-module

Which of the following problems are you reporting?

The module specifier resolves at runtime, but not at build time

Demonstrate the defect described above with a code sample.

import htmlTags from 'html-tags/html-tags.json' assert { type: 'json' }

const keys = Object.keys(htmlTags)

Run tsc --showConfig and paste its output here

{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"moduleResolution": "node16"
},
"files": [
"./index.ts"
]
}

Run tsc --traceResolution and paste its output here

https://pastebin.com/GzfXrXi4

Sorry, content too long

Paste the package.json of the importing module, if it exists

{
"name": "resolve-json-module",
"dependencies": {
"html-tags": "^3.3.1",
"typescript": "^5.1.6"
}
}

Paste the package.json of the target module, if it exists

{
"name": "html-tags",
"version": "3.3.1",
"description": "List of standard HTML tags",
"license": "MIT",
"repository": "sindresorhus/html-tags",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"engines": {
"node": ">=8"
},
"scripts": {
"test": "xo && ava && tsd"
},
"files": [
"index.js",
"index.d.ts",
"void.js",
"void.d.ts",
"html-tags.json",
"html-tags-void.json"
],
"keywords": [
"html",
"html5",
"tags",
"elements",
"list",
"whatwg",
"w3c",
"void",
"self-closing"
],
"devDependencies": {
"ava": "^1.4.1",
"tsd": "^0.7.2",
"xo": "^0.24.0"
},
"xo": {
"rules": {
"import/extensions": "off"
}
}
}

Any other comments can go here

I wan to use the latest ES feature of asserted imports to directly load a JSON from the package html-tags. The feature requires targeting esnext and I expected it to be enough, given the no compilation actually happens - the syntax is exactly the same in TS and JS

However, to actually make tsc happy, it is necessary to add --resolveJsonModule --allowSyntheticDefaultImports. Without these two, I'm getting these errors

error TS2732: Cannot find module 'html-tags/html-tags.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

resolveJsonModule seems completely redundant because importing JSON is supported per assert { type: 'json' }

error TS1259: Module '"/Volumes/Home/projects/temp/resolve-json-module/node_modules/html-tags/html-tags"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
[...]
This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

I'm not sure about this. Isn't default-import the only way to import a JSON file?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked resolve-json-module demo and its index.ts reproduction; run tsc with the shown es2020, esnext, and node16 settings, then compare tsc --showConfig and --traceResolution output with and without the flags. Done means the asserted JSON import type-checks without resolveJsonModule or allowSyntheticDefaultImports while preserving the reported runtime-compatible syntax.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
compilers
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.