react-component / react-component/util
Fix ESM exports
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 670
- Forks
- 205
- Avg merge
- 11d 17h
- Merged PRs (30d)
- 4
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:
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.
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.
Assessment
- Tech stack
- node.js, typescript
- Domain
- build-system, developer-experience
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100