react-component / react-component/util

Fix ESM exports

Open
#491 0 comments 0 reactions 0 assignees View on GitHub

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.mts or .mjs extension, or a package.json containing {"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 any import ... 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 in package.json)
  • in "rc-???/es/..." any relative import (specifier or expression) in a .d.ts or .js should point to a file (not a directory) and have a file extension => TS error since modules are resolved as any
  • there should be no comment between /*#__PURE__*/ comment and the function call, cf rc-field-form/es/utils/validateUtil.js => esbuild error during build
  • modules with no default export (such as react) should not be imported using import Module from 'module' but instead with import * as Module from 'module', cf rc-dialog/es/Dialog/Content/Panel.d.ts or rc-picker/es/interface.d.ts => TS error with allowSyntheticDefaultImports disabled and runtime error without a bundler that fakes a default import
  • TS looks for types through the main field of package.json, even when module is imported from an ESM, so package.json should 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.