TS2604 and TS2786 for "rc-field-form" under moduleResolution node16 and package.json#type = "module"

[thynson]

🔎 Search Terms

moduleResolution node16, "rc-field-form"

🕗 Version & Regression Information

When trying to upgrading to latest typescript, due to #54567, the moduleResolution has to be changed to "moduleResolution": "node16", but blocked by the bug that "rc-field-form" does not work under "moduleResolution": "node16" and package.json#type = "module", while it's accepted under "moduleResolution": "node" prior to Typescript 5.1

⏯ Playground Link

No response

💻 Code

The following code compiles under "moduleResolution": "node" but rejected under "moduleResolution": "node16".

import React from 'react';
import RcForm from 'rc-field-form';

export default function () {
	const [form] = RcForm.useForm();

	return <RcForm form={form}>
		</RcForm>;
}

with tsconfig:

{
	"compilerOptions": {
		"module": "node16",
		"moduleResolution": "node16",
		"esModuleInterop": true,
		"target": "es2022",
		"lib":["es2022"],
		"jsx":"react"
	},
	"includes": [
		"src/**/*.ts",
		"src/**/*.tsx"
	]
}

and package.json:

{
  "name": "module-resolution-node16",
  "type":"module",
  "main": "index.js",
  "devDependencies": {
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "@types/react": "^18.2.46",
    "@types/react-dom": "^18.2.18",
    "rc-field-form": "^1.41.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

🙁 Actual behavior

src/index.tsx:7:10 - error TS2604: JSX element type 'RcForm' does not have any construct or call signatures.

7  return <RcForm form={form}>
           ~~~~~~

src/index.tsx:7:10 - error TS2786: 'RcForm' cannot be used as a JSX component.
  Its type 'typeof import("/path/to/node_modules/rc-field-form/es/index")' is not a valid JSX element type.

7  return <RcForm form={form}>
           ~~~~~~


Found 2 errors in the same file, starting at: src/index.tsx:7

🙂 Expected behavior

It's expected to be accepted by tsc.

Additional information about the issue

No response

[fatcerberus]

https://arethetypeswrong.github.io/?p=rc-field-form%401.41.0
This looks like something that has to be fixed in rc-field-form.

[thynson]

Given the package.json(irrelevant fields are edited) of rc-field-form,

{
  "name": "rc-field-form",
  "version": "1.32.0",
  "description": "React Form Component",
  "typings": "es/index.d.ts",
  "engines": { "...":" ..." },
  "keywords": ["..."],
  "homepage": "https://github.com/react-component/field-form",
  "author": "smith3816@gmail.com",
  "repository": { "...":" ..." },
  "bugs": { "...":" ..." },
  "files": [ "..." ],
  "license": "MIT",
  "main": "./lib/index",
  "module": "./es/index",
  "scripts": { "...":" ..." },
  "peerDependencies": { "...":" ..." },
  "dependencies": { "...":" ..." },
  "devDependencies":{ "...":" ..." },
}

which did not contains the type field, and to my under standing, it should be treated as a CommonJS module, and the import ("rc-field-form") should resolve to "/path/to/node_modules/rc-field-form/lib/index", instead of "/path/to/node_modules/rc-field-form/es/index".
Unless "moduleResolution" is set to "bundler", fields likepackage.json#module for bundler should be ignored.

EDIT: Probably this is irrelevant, the contents of "/path/to/node_modules/rc-field-form/lib/index" and "/path/to/node_modules/rc-field-form/es/index" are actually the same.

[fatcerberus]

It doesn’t contain "type": "module" but it does contain

"typings": "es/index.d.ts",

which would explain why TS is looking up the ESM types. I think the module field is a red herring.

[thynson]

https://arethetypeswrong.github.io/?p=rc-field-form%401.41.0
This looks like something that has to be fixed in rc-field-form.

Both CommonJS and ESM entry point of rc-field-form are emit by tsc from the same source, and it looks innocent. It looks like "esModuleInterop": true does not take effect on "moduleResolution": "node16"?

[RyanCavanaugh]

You can tell from the output of traceResolution that rc-react-form is interpreted as a CJS module:

======== Resolving module 'react' from 'D:/Throwaway/repro56935/node_modules/rc-field-form/es/index.d.ts'. ========
Explicitly specified module resolution kind: 'Node16'.
Resolving in CJS mode with conditions 'require', 'types', 'node'.

You can tell from rc-react-form that it's a CJS module, too, because it uses extensionless paths:

import { FormInstance } from './interface';

You can also tell that rc-field-form doesn't support ESM importing by just trying it!

D:\Throwaway\repro56935>type test.mjs
import rc from "rc-field-form";
console.log(rc);

D:\Throwaway\repro56935>node test.mjs
(node:16700) [DEP0151] DeprecationWarning: Package D:\Throwaway\repro56935\node_modules\rc-field-form\ has a "main" field set to "./lib/index", excluding the full filename and extension to the resolved file at "lib\index.js", imported from D:\Throwaway\repro56935\test.mjs.
 Automatic extension resolution of the "main" field is deprecated for ES modules.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:16700) [DEP0151] DeprecationWarning: Package D:\Throwaway\repro56935\node_modules\rc-field-form\ has a "main" field set to "./lib/index", excluding the full filename and extension to the resolved file at "lib\index.js", imported from D:\Throwaway\repro56935\test.mjs.
 Automatic extension resolution of the "main" field is deprecated for ES modules.
file:///D:/Throwaway/repro56935/test.mjs:1
import rc from "rc-field-form";
       ^^
SyntaxError: The requested module 'rc-field-form' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:518:24)
    at async loadESM (node:internal/process/esm_loader:102:5)
    at async handleMainPromise (node:internal/modules/run_main:66:12)

Both CommonJS and ESM entry point of rc-field-form are emit by tsc from

This isn't supported and doesn't work; see #54593