Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
thynson opened this issue Jan 3, 2024 · 5 comments
Closed

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

thynson opened this issue Jan 3, 2024 · 5 comments
Labels
Working as Intended The behavior described is the intended behavior; this is not a bug

Comments

@thynson
Copy link

thynson commented Jan 3, 2024 •
edited
Loading

🔎 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
Copy link

https://arethetypeswrong.github.io/[email protected]
This looks like something that has to be fixed in rc-field-form.

@thynson
Copy link
Author

thynson commented Jan 3, 2024 •
edited
Loading

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": "[email protected]",
  "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
Copy link

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
Copy link
Author

thynson commented Jan 3, 2024

https://arethetypeswrong.github.io/[email protected]
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
Copy link
Member

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

@RyanCavanaugh RyanCavanaugh added the Working as Intended The behavior described is the intended behavior; this is not a bug label Jan 3, 2024
@thynson thynson closed this as completed Jan 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Working as Intended The behavior described is the intended behavior; this is not a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@thynson @fatcerberus @RyanCavanaugh