Module resolution: Regression in JSON import using Node16 resolution #60589

raykyri · 2024-11-25T10:23:51Z

Demo Repo

Which of the following problems are you reporting?

Something else more complicated which I'll explain in more detail

Demonstrate the defect described above with a code sample.

import * as pkg from "../package.json"

Run `tsc --showConfig` and paste its output here

> cd examples/chat-explorer
> npx tsc --showConfig
{
    "compilerOptions": {
        "composite": true,
        "strict": true,
        "declaration": true,
        "module": "node16",
        "target": "es2020",
        "moduleResolution": "node16",
        "allowSyntheticDefaultImports": true,
        "useDefineForClassFields": true,
        "skipLibCheck": true,
        "rootDir": "./src",
        "outDir": "./lib",
        "lib": [
            "es2020",
            "dom",
            "dom.iterable"
        ],
        "jsx": "react-jsx",
        "noUnusedLocals": true,
        "noFallthroughCasesInSwitch": true,
        "resolveJsonModule": true,
        "moduleDetection": "force",
        "esModuleInterop": true,
        "resolvePackageJsonExports": true,
        "resolvePackageJsonImports": true,
        "incremental": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "strictBuiltinIteratorReturn": true,
        "alwaysStrict": true,
        "useUnknownInCatchVariables": true
    },
    "references": [
        {
            "path": "../../packages/core"
        },
        {
            "path": "../../packages/chain-atp"
        },
        {
            "path": "../../packages/chain-cosmos"
        },
        {
            "path": "../../packages/chain-ethereum"
        },
        {
            "path": "../../packages/chain-ethereum-viem"
        },
        {
            "path": "../../packages/chain-solana"
        },
        {
            "path": "../../packages/chain-substrate"
        },
        {
            "path": "../../packages/signatures"
        }
    ],
    "files": [
        "./src/ActionsTable.tsx",
        "./src/HomePage.tsx",
        "./src/NetworkPlot.tsx",
        "./src/SessionsTable.tsx",
        "./src/main.tsx",
        "./src/useCursorStack.ts",
        "./src/utils.ts",
        "./src/vite-env.d.ts",
        "./src/components/DidPopover.tsx",
        "./src/components/Navbar.tsx",
        "./src/components/PaginationButton.tsx"
    ],
    "include": [
        "src"
    ],
    "exclude": [
        "/Users/selkie/Development/canvas/examples/chat-explorer/lib"
    ]
}

Run `tsc --traceResolution` and paste its output here

File '/Users/selkie/Development/canvas/examples/chat-explorer/src/package.json' does not exist.
Found 'package.json' at '/Users/selkie/Development/canvas/examples/chat-explorer/package.json'.
======== Resolving module 'react/jsx-runtime' from '/Users/selkie/Development/canvas/examples/chat-explorer/src/ActionsTable.tsx'. ========
Explicitly specified module resolution kind: 'Node16'.
Resolving in ESM mode with conditions 'import', 'types', 'node'.
File '/Users/selkie/Development/canvas/examples/chat-explorer/src/package.json' does not exist according to earlier cached lookups.
File '/Users/selkie/Development/canvas/examples/chat-explorer/package.json' exists according to earlier cached lookups.
Loading module 'react/jsx-runtime' from 'node_modules' folder, target file types: TypeScript, JavaScript, Declaration, JSON.
Searching all ancestor node_modules directories for preferred extensions: TypeScript, Declaration.
Directory '/Users/selkie/Development/canvas/examples/chat-explorer/src/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/selkie/Development/canvas/examples/node_modules' does not exist, skipping all lookups in it.
Found 'package.json' at '/Users/selkie/Development/canvas/node_modules/react/package.json'.
Using 'exports' subpath './jsx-runtime' with target './jsx-runtime.js'.
File name '/Users/selkie/Development/canvas/node_modules/react/jsx-runtime.js' has a '.js' extension - stripping it.
File '/Users/selkie/Development/canvas/node_modules/react/jsx-runtime.ts' does not exist.
File '/Users/selkie/Development/canvas/node_modules/react/jsx-runtime.tsx' does not exist.
File '/Users/selkie/Development/canvas/node_modules/react/jsx-runtime.d.ts' does not exist.
Export specifier './jsx-runtime' does not exist in package.json scope at path '/Users/selkie/Development/canvas/node_modules/react'.
Found 'package.json' at '/Users/selkie/Development/canvas/node_modules/@types/react/package.json'.
Entering conditional exports.
Saw non-matching condition 'types@<=5.0'.
Matched 'exports' condition 'types'.
Entering conditional exports.
Matched 'exports' condition 'default'.
Using 'exports' subpath './jsx-runtime' with target './jsx-runtime.d.ts'.
File '/Users/selkie/Development/canvas/node_modules/@types/react/jsx-runtime.d.ts' exists - use it as a name resolution result.
'package.json' does not have a 'peerDependencies' field.
Resolved under condition 'default'.
Exiting conditional exports.
Resolved under condition 'types'.
Exiting conditional exports.
Resolving real path for '/Users/selkie/Development/canvas/node_modules/@types/react/jsx-runtime.d.ts', result '/Users/selkie/Development/canvas/node_modules/@types/react/jsx-runtime.d.ts'.
======== Module name 'react/jsx-runtime' was successfully resolved to '/Users/selkie/Development/canvas/node_modules/@types/react/jsx-runtime.d.ts' with Package ID '@types/react/[email protected]'. ========
======== Resolving module 'swr' from '/Users/selkie/Development/canvas/examples/chat-explorer/src/ActionsTable.tsx'. ========
Explicitly specified module resolution kind: 'Node16'.
Resolving in ESM mode with conditions 'import', 'types', 'node'.
File '/Users/selkie/Development/canvas/examples/chat-explorer/src/package.json' does not exist according to earlier cached lookups.
File '/Users/selkie/Development/canvas/examples/chat-explorer/package.json' exists according to earlier cached lookups.
Loading module 'swr' from 'node_modules' folder, target file types: TypeScript, JavaScript, Declaration, JSON.
Searching all ancestor node_modules directories for preferred extensions: TypeScript, Declaration.
Directory '/Users/selkie/Development/canvas/examples/chat-explorer/src/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/selkie/Development/canvas/examples/node_modules' does not exist, skipping all lookups in it.
Found 'package.json' at '/Users/selkie/Development/canvas/node_modules/swr/package.json'.
Entering conditional exports.
Saw non-matching condition 'react-server'.
Matched 'exports' condition 'import'.
Entering conditional exports.
Matched 'exports' condition 'types'.
Using 'exports' subpath '.' with target './dist/core/index.d.mts'.
File '/Users/selkie/Development/canvas/node_modules/swr/dist/core/index.d.mts' exists - use it as a name resolution result.
'package.json' has a 'peerDependencies' field.
Resolving real path for '/Users/selkie/Development/canvas/node_modules/swr', result '/Users/selkie/Development/canvas/node_modules/swr'.
File '/Users/selkie/Development/canvas/node_modules/react/package.json' exists according to earlier cached lookups.
Found peerDependency 'react' with '18.3.1' version.
Resolved under condition 'types'.

// ...

======== Module name 'vite' was successfully resolved to '/Users/selkie/Development/canvas/node_modules/vite/index.d.cts' with Package ID 'vite/[email protected]+@types/[email protected][email protected][email protected]'. ========
src/HomePage.tsx:1:22 - error TS1543: Importing a JSON file into an ECMAScript module requires a 'type: "json"' import attribute when 'module' is set to 'Node16'.

1 import * as pkg from "../package.json"
                       ~~~~~~~~~~~~~~~~~


Found 1 error in src/HomePage.tsx:1

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

{
	"name": "@canvas-js/chat-explorer",
	"private": true,
	"type": "module",
	"version": "0.12.5",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
		"dev:server": "tsx --tsconfig server/tsconfig.json --watch server/server.ts",
		"start:server": "cross-env NODE_ENV=production node dist/server.js"
	},
	"dependencies": {
		"@canvas-js/chain-atp": "0.12.5",
		"@canvas-js/chain-cosmos": "0.12.5",
		"@canvas-js/chain-ethereum": "0.12.5",
		"@canvas-js/chain-solana": "0.12.5",
		"@canvas-js/chain-substrate": "0.12.5",
		"@canvas-js/core": "0.12.5",
		"@canvas-js/interfaces": "0.12.5",
		"@ipld/dag-json": "^10.2.2",
		"@radix-ui/themes": "^3.1.3",
		"@vitejs/plugin-react": "^4.3.1",
		"autoprefixer": "^10.4.20",
		"cors": "^2.8.5",
		"cross-env": "^7.0.3",
		"d3": "^7.9.0",
		"date-fns": "^3.6.0",
		"express": "^4.19.2",
		"express-ipld": "^0.0.1",
		"http-status-codes": "^2.3.0",
		"react": "^18.3.1",
		"react-dom": "^18.3.1",
		"react-router-dom": "^6.20.1",
		"swr": "^2.2.5",
		"vite": "^5.4.8"
	},
	"devDependencies": {
		"@types/cors": "^2.8.17",
		"@types/d3": "^7.4.3",
		"@types/express": "^4.17.21",
		"@types/node": "^18.11.5",
		"@types/react": "^18.3.3",
		"@types/react-dom": "^18.3.0"
	}
}

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

n/a

Any other comments can go here

A recent change that landed around 5.7.0 seems to break Node16 imports of .json files, because a type: json import attributed is required but also not allowed to be used: canvasxyz/canvas#404

It might be related to this issue: #59684

Which was addressed in this PR: #60019

It seems to produce new errors in these automated builds: https://github.com/search?q=repo%3Amicrosoft%2FTypeScript+%22named+imports+are+not+allowed%22&type=issues

The text was updated successfully, but these errors were encountered:

kirkwaiblinger · 2024-11-26T00:09:47Z

Concise repro:

// "module": "node16", "resolveJsonModule": true, in a *.mts file (does not apply to cjs output)

// TS error: Importing a JSON file into an ECMAScript module requires a 'type: "json"' import attribute when 'module' is set to 'Node16'.ts(1543)
import something1 from './someThing.json';

// TS error: Import attributes are only supported when the '--module' option is set to 'esnext', 'nodenext', or 'preserve'.ts(2823)
import something2 from './someThing.json' with { type: "json" };

(related, #60598)

jakebailey · 2024-11-26T16:43:29Z

@andrewbranch

jakebailey · 2024-11-26T18:06:26Z

The issue is pretty poorly formatted, so to restate, the problem is that we require an import attribute for JSON in Node16 resolution, but import attributes are not allowed in Node16 resolution?

raykyri · 2024-11-26T18:24:14Z

That seems to be what's happening on our side, yes.

t3chguy · 2024-11-27T09:30:31Z

I am seeing the same thing, and even if I bump the module to nodenext that does not help as import type assertions are forbidden on import type statements

src/language-helper.ts:14:49 - error TS2822: Import assertions cannot be used with type-only imports or exports.

14 import type EN from "./i18n/strings/en_EN.json" assert { type: "json" };

src/language-helper.ts:14:21 - error TS1543: Importing a JSON file into an ECMAScript module requires a 'type: "json"' import attribute when 'module' is set to 'Node16'.

14 import type EN from "./i18n/strings/en_EN.json";

raykyri mentioned this issue Nov 25, 2024

Upgrade typescript, fix json import error canvasxyz/canvas#404

Open

andrewbranch self-assigned this Nov 26, 2024

andrewbranch added the Bug A bug in TypeScript label Nov 26, 2024

andrewbranch added this to the TypeScript 5.7.3 milestone Nov 26, 2024

t3chguy mentioned this issue Nov 27, 2024

Update dependency typescript to v5.7.2 element-hq/element-desktop#2014

Draft

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module resolution: Regression in JSON import using Node16 resolution #60589

Module resolution: Regression in JSON import using Node16 resolution #60589

raykyri commented Nov 25, 2024 •

edited by jakebailey

Loading

kirkwaiblinger commented Nov 26, 2024 •

edited

Loading

jakebailey commented Nov 26, 2024

jakebailey commented Nov 26, 2024

raykyri commented Nov 26, 2024

t3chguy commented Nov 27, 2024

Module resolution: Regression in JSON import using Node16 resolution #60589

Module resolution: Regression in JSON import using Node16 resolution #60589

Comments

raykyri commented Nov 25, 2024 • edited by jakebailey Loading

Demo Repo

Which of the following problems are you reporting?

Demonstrate the defect described above with a code sample.

Run tsc --showConfig and paste its output here

Run tsc --traceResolution and paste its output here

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

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

Any other comments can go here

kirkwaiblinger commented Nov 26, 2024 • edited Loading

jakebailey commented Nov 26, 2024

jakebailey commented Nov 26, 2024

raykyri commented Nov 26, 2024

t3chguy commented Nov 27, 2024

raykyri commented Nov 25, 2024 •

edited by jakebailey

Loading

Run `tsc --showConfig` and paste its output here

Run `tsc --traceResolution` and paste its output here

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

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

kirkwaiblinger commented Nov 26, 2024 •

edited

Loading