Fix ESM exports #46413

jer-sen · 2023-12-12T20:43:25Z

Reproduction link

Steps to reproduce

Import things from "antd" & types from "antd/es/..." from an ESM module with recommended (less fault-tolerant / strictest) TS config.

My tsconfig.json contains:

{
  "compilerOptions": {
    "moduleResolution": "NodeNext",
    "module": "NodeNext",
    "skipLibCheck": false,
    "skipDefaultLibCheck": false,
    "allowImportingTsExtensions": false,
    "allowSyntheticDefaultImports": false,
    "strict": true,
    "verbatimModuleSyntax": true,
    "isolatedModules": true
  },
}

What is expected?

No error during development, build nor run time.

What is actually happening?

Many errors.

Environment	Info
antd	5.12.2
React	12.2.0
System	Windows
Browser	Firefox

Origin of errors:

ESM files in "antd/es/..." must have .d.mts or .mjs extension, or a package.json containing {"type":"module"} must be added to the folder
in "antd/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 "antd/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 antd/es/skeleton/Paragraph.js or antd/es/list/Item.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 antd/es/config-provider/defaultRenderEmpty.d.ts => TS error with allowSyntheticDefaultImports disabled and runtime error without a bundler that fakes a default import

Interesting reading:

I found quite the same issues in react-component modules cf react-component/util#491

The text was updated successfully, but these errors were encountered:

zombieJ · 2023-12-13T01:48:17Z

Pls check for help with the framework you are using. We've already config the module main typings in package.json that the framework should get correct info by this. I do believe its the config issue that antd side can help less on this : )

jer-sen · 2023-12-13T08:05:22Z

@zombieJ thanks for you answer.

I am not using any framework. The antd code published to NPM does not follow TypeScript recommendations, nor ESM specifications. Please have a look to the 2 links in my issue.
Publishing ESM exports is not just about adding some lines in the package.json!
You are not even using the right file extensions! Cf https://nodejs.org/api/esm.html#enabling

You should be more respectful of people who take the time to bring problems to your attention...

replygirl · 2023-12-19T01:42:32Z

this is affecting me as well, please reopen @zombieJ

zombieJ · 2023-12-19T01:54:45Z

Hi, @jer-sen @replygirl ,
Could you help provide a reproduce about this?

jer-sen · 2023-12-19T17:21:17Z

Thanks for reopening this issue. I will try to help you as much as I can.

Not easy to reproduce. I think the easiest thing to do is to fix the kind of errors I have listed.

An easy thing to test is TS lib check. I don't know if there is a way to have an online repro but you can follow these few steps:

Create the following files

// package.json
{
  "license": "MIT",
  "dependencies": {
    "antd": "*",
    "react": "~18.2.0",
    "typescript": "5.3.3"
  },
  "type": "module",
  "devDependencies": {
    "@types/react": "~18.2.45"
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "allowImportingTsExtensions": false,
    "allowSyntheticDefaultImports": false,
    "alwaysStrict": true,
    "declaration": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["ESNext", "DOM"],
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "skipDefaultLibCheck": false,
    "skipLibCheck": false,
    "strict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "target": "ESNext",
    "verbatimModuleSyntax": true
  }
}

// index.tsx
import "antd";

run yarn
run yarn tsx index.tsx
you will get a list of errors and files with errors:

...
Errors  Files
...
     1  node_modules/antd/es/affix/index.d.ts:1
     1  node_modules/antd/es/alert/ErrorBoundary.d.ts:21
     1  node_modules/antd/es/alert/index.d.ts:1
     1  node_modules/antd/es/app/context.d.ts:1
     1  node_modules/antd/es/app/index.d.ts:2
     1  node_modules/antd/es/button/button.d.ts:1
     1  node_modules/antd/es/button/buttonHelpers.d.ts:1
     1  node_modules/antd/es/checkbox/GroupContext.d.ts:1
     1  node_modules/antd/es/color-picker/ColorPicker.d.ts:2
     1  node_modules/antd/es/config-provider/defaultRenderEmpty.d.ts:1
     1  node_modules/antd/es/descriptions/DescriptionsContext.d.ts:1
     1  node_modules/antd/es/flex/index.d.ts:1
     1  node_modules/antd/es/flex/interface.d.ts:1
     1  node_modules/antd/es/float-button/BackTop.d.ts:1
     1  node_modules/antd/es/float-button/FloatButtonGroup.d.ts:1
     1  node_modules/antd/es/float-button/interface.d.ts:1
     1  node_modules/antd/es/input/Input.d.ts:1
     1  node_modules/antd/es/list/context.d.ts:1
     1  node_modules/antd/es/list/Item.d.ts:2
     1  node_modules/antd/es/modal/style/index.d.ts:1
     1  node_modules/antd/es/qr-code/index.d.ts:1
     1  node_modules/antd/es/slider/index.d.ts:1
     1  node_modules/antd/es/space/context.d.ts:1
     1  node_modules/antd/es/table/hooks/useSelection.d.ts:20
     1  node_modules/antd/es/tag/style/index.d.ts:1
     1  node_modules/antd/es/theme/context.d.ts:1
     1  node_modules/antd/es/theme/util/statistic.d.ts:9
     1  node_modules/antd/es/tour/index.d.ts:1
     1  node_modules/antd/es/transfer/index.d.ts:2
     1  node_modules/antd/es/transfer/list.d.ts:1
     1  node_modules/antd/es/tree/Tree.d.ts:2
     1  node_modules/antd/es/watermark/index.d.ts:1
...

@zombieJ can you reproduce this?

MadCcc · 2023-12-20T08:41:45Z

@jer-sen Please provide a repo

jer-sen · 2023-12-20T08:56:18Z

@MadCcc for 3 files with 40 lines???

github-actions · 2023-12-20T09:05:41Z

Hello @jer-sen. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x, or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @jer-sen，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.x 或 antd@4.x 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

什么是最小化重现，为什么这是必需的？

jer-sen · 2023-12-20T09:47:01Z

@afc163 @MadCcc @zombieJ here is a repro https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-9qzj6f

You can download source, unzip, run yarn and run yarn tsx index.tsx to see TS errors.

yoyo837 · 2023-12-20T09:49:33Z

@afc163 @MadCcc @zombieJ here is a repro https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-9qzj6f

You can download source, unzip, run yarn and run yarn tsx index.tsx to see TS errors.

So, we can’t see those errors when running codesandbox online?

jer-sen · 2023-12-20T09:57:40Z

That's true.
And as I've already written in a precedent message:

I don't know if there is a way to have an online repro

yoyo837 · 2023-12-20T10:06:32Z

Could you make a repo zip file that can be downloaded, unzip and run directly? Downloading from the source code may produce a different repo.

jer-sen · 2023-12-20T10:26:36Z

No. Stop. I'm happy to help but please...

Go on codesandbox and choose "Download Sandbox".

yoyo837 · 2023-12-20T10:37:30Z

@afc163 @MadCcc @zombieJ here is a repro https://codesandbox.io/p/sandbox/antd-reproduction-template-forked-9qzj6f
You can download source, unzip, run yarn and run yarn tsx index.tsx to see TS errors.

So, we can’t see those errors when running codesandbox online?

Sorry for that request, I didn't notice this download feature of codesandbox.

jer-sen · 2023-12-21T21:08:11Z

@yoyo837 did you manage to reproduce?

yoyo837 · 2023-12-22T01:33:01Z

@yoyo837 did you manage to reproduce?

No, when I run npx tsx index.tsx, it reports document is undefined. Did I miss something?

jer-sen · 2023-12-28T08:01:32Z

@yoyo837 did you:

download sandbox sourcemap zip
extract the zip in a folder
run a terminal in this folder
run yarn to install modules
run yarn tsc (no need of npx since typescript has been installed with modules) to run a TS check (you can specify index.tsx but, if missing, TS will autodetect the project files)
?

Maybe you forgot to install modules.

yoyo837 · 2023-12-28T08:15:16Z

I run the following command:

$ brew install yarn
$ npm i
$ npm i @types/react-dom -D
$ yarn tsc

And got this:

jer-sen · 2023-12-28T10:05:58Z

Yes ! Now it's time to fix these first issues.

Most of them can be fixed by:

adding file antd/es/package.json containing {"type":"module"} for ...The current file is a CommonJS module... and ...can only be used with a default import... errors (you can also change all files extensions to *.mjs) since antd module is not an ESM you have to tell Node and TS that the files in /es folders are ESM
then you will get new errors, fixable by adding file extension .js (or /index.js in case of a folder) to relative imports for ...Relative import paths need explicit file extensions in ECMAScript imports... new errors

But you should fix all these in the tsconfig or build process of antd not in the resulting files.
If I can be of any help, just ask.

yoyo837 · 2023-12-28T10:32:41Z

cc: Core member @afc163 @MadCcc @zombieJ

github-actions · 2024-05-04T06:32:57Z

Hello @jer-sen. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @jer-sen，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

github-actions bot added the unconfirmed label Dec 12, 2023

zombieJ closed this as completed Dec 13, 2023

zombieJ reopened this Dec 19, 2023

zombieJ added needs-more-info and removed unconfirmed labels Dec 19, 2023

github-actions bot removed the needs-more-info label Dec 19, 2023

afc163 added the 🤔 Need Reproduce We cannot reproduce your problem label Dec 20, 2023

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Dec 26, 2023

zombieJ reopened this Dec 28, 2023

yoyo837 removed the 🤔 Need Reproduce We cannot reproduce your problem label Dec 28, 2023

yoyo837 added the 🧶 Low Priority This issue may not fit our design or its not common requirement. We may not do this. label Dec 28, 2023

LouisStairwage mentioned this issue Feb 7, 2024

fix(esm): create package.json with module type, add import extensions… umijs/father#742

Open

github-actions bot added the Inactive label Feb 16, 2024

afc163 added the help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. label May 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix ESM exports #46413

Fix ESM exports #46413

jer-sen commented Dec 12, 2023

zombieJ commented Dec 13, 2023

jer-sen commented Dec 13, 2023

replygirl commented Dec 19, 2023

zombieJ commented Dec 19, 2023

jer-sen commented Dec 19, 2023

MadCcc commented Dec 20, 2023

jer-sen commented Dec 20, 2023

github-actions bot commented Dec 20, 2023

jer-sen commented Dec 20, 2023

yoyo837 commented Dec 20, 2023

jer-sen commented Dec 20, 2023

yoyo837 commented Dec 20, 2023

jer-sen commented Dec 20, 2023

yoyo837 commented Dec 20, 2023 •

edited

jer-sen commented Dec 21, 2023

yoyo837 commented Dec 22, 2023

jer-sen commented Dec 28, 2023

yoyo837 commented Dec 28, 2023

jer-sen commented Dec 28, 2023 •

edited

yoyo837 commented Dec 28, 2023

github-actions bot commented May 4, 2024

Fix ESM exports #46413

Fix ESM exports #46413

Comments

jer-sen commented Dec 12, 2023

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

zombieJ commented Dec 13, 2023

jer-sen commented Dec 13, 2023

replygirl commented Dec 19, 2023

zombieJ commented Dec 19, 2023

jer-sen commented Dec 19, 2023

MadCcc commented Dec 20, 2023

jer-sen commented Dec 20, 2023

github-actions bot commented Dec 20, 2023

jer-sen commented Dec 20, 2023

yoyo837 commented Dec 20, 2023

jer-sen commented Dec 20, 2023

yoyo837 commented Dec 20, 2023

jer-sen commented Dec 20, 2023

yoyo837 commented Dec 20, 2023 • edited

jer-sen commented Dec 21, 2023

yoyo837 commented Dec 22, 2023

jer-sen commented Dec 28, 2023

yoyo837 commented Dec 28, 2023

jer-sen commented Dec 28, 2023 • edited

yoyo837 commented Dec 28, 2023

github-actions bot commented May 4, 2024

yoyo837 commented Dec 20, 2023 •

edited

jer-sen commented Dec 28, 2023 •

edited