Fix ESM exports
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 30/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- node.js, typescript
- Domain
- build-system, developer-experience
Research direction
Start by reviewing the package metadata and ESM examples named in the issue, including rc-field-form/es/utils/validateUtil.js, rc-dialog/es/Dialog/Content/Panel.d.ts, and rc-picker/es/interface.d.ts. Check how the rc-* packages expose their lib and es trees under the shown NodeNext tsconfig. Done means ESM imports and type imports across the react-component modules resolve without the listed TypeScript, runtime, or esbuild errors.
Written by the indexing model from the issue text.
Description
There are many errors to fix in all react-component modules for them to work well when imported from an ESM module.
Importing things from "rc-???" & types from "rc-???/es/..." from an ESM module with recommended (less fault-tolerant / strictest) TS config should not raise any error.
My tsconfig.json contains:
{
"compilerOptions": {
"moduleResolution": "NodeNext",
"module": "NodeNext",
"skipLibCheck": false,
"skipDefaultLibCheck": false,
"allowImportingTsExtensions": false,
"allowSyntheticDefaultImports": false,
"strict": true,
"verbatimModuleSyntax": true,
"isolatedModules": true
},
}
Origin of errors:
- ESM files in
"rc-???/es/..."must have.d.mtsor.mjsextension, or apackage.jsoncontaining{"type":"module"}must be added to the folder - in
"rc-???/es/..."do not import any file from CJS exports of a module, there should not have anyimport ... from 'rc-???/lib/...';=> import will fail if (and it would be a good thing) imported module restricts its/lib/path to only CJS requires (exportsfield inpackage.json) - in
"rc-???/es/..."any relative import (specifier or expression) in a.d.tsor.jsshould point to a file (not a directory) and have a file extension => TS error since modules are resolved asany - there should be no comment between
/*#__PURE__*/comment and the function call, cfrc-field-form/es/utils/validateUtil.js=> esbuild error during build - modules with no default export (such as
react) should not be imported usingimport Module from 'module'but instead withimport * as Module from 'module', cfrc-dialog/es/Dialog/Content/Panel.d.tsorrc-picker/es/interface.d.ts=> TS error withallowSyntheticDefaultImportsdisabled and runtime error without a bundler that fakes a default import - TS looks for types through the
mainfield ofpackage.json, even when module is imported from an ESM, sopackage.jsonshould be patched with:
- "main": "./lib/index",
- "module": "./es/index",
+ "exports": {
+ ".": {
+ "types": {
+ "import": "./es/index.d.ts",
+ "default": "./lib/index.d.ts"
+ },
+ "import": "./es/index.js",
+ "default": "./lib/index.js"
+ },
+ "./es/*": {
+ "types": {
+ "import": "./es/*"
+ },
+ "import": "./es/*"
+ },
+ "./lib/*": {
+ "types": {
+ "require": "./lib/*"
+ },
+ "require": "./lib/*"
+ }
+ },
Interesting reading:
- Dominant language
- TypeScript
- Stars
- 670
- Forks
- 205
- Avg merge
- 15d 17h
- Merged PRs (30d)
- 6
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react-component/util
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
react-component/util#816 ·
-
injectCSS method not attaching csp nonce passed to it. it is used in antd components internally Open
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
react-component/util#671 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
react-component/util#738 · 1 comment · 1 reaction ·
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
react-component/util#710 ·
-
Difficulty 3/5 1-2 days Newbie friendliness 25/100
react-component/util#647 · 5 comments ·
All issues in react-component/util
Similar issues
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
dennys-bd/agent-hive#184 ·
-
Add: hunch Open
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
AbdelStark/awesome-typesafe#104 ·
-
ai-observability bug team/ai-observability
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
vicharanashala/fln#563 ·