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.
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:
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:Origin of errors:
"rc-???/es/..."
must have.d.mts
or.mjs
extension, or apackage.json
containing{"type":"module"}
must be added to the folder"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 (exports
field inpackage.json
)"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 asany
/*#__PURE__*/
comment and the function call, cfrc-field-form/es/utils/validateUtil.js
=> esbuild error during buildreact
) should not be imported usingimport Module from 'module'
but instead withimport * as Module from 'module'
, cfrc-dialog/es/Dialog/Content/Panel.d.ts
orrc-picker/es/interface.d.ts
=> TS error withallowSyntheticDefaultImports
disabled and runtime error without a bundler that fakes a default importmain
field ofpackage.json
, even when module is imported from an ESM, sopackage.json
should be patched with:Interesting reading: