feat: Add ESM support #1142
feat: Add ESM support #1142
Conversation
Demo
Jenkins 
demos.haus 
| "build-cjs": "NODE_ENV=production BABEL_ENV=cjs babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'", | ||
| "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json", | ||
| "build-esm": "NODE_ENV=production BABEL_ENV=esm babel src --out-dir dist/esm --copy-files --extensions '.js,.jsx,.ts,.tsx'", | ||
| "build-declaration-esm": "tsc --project tsconfig.json --outDir dist/esm && tsc-alias -p tsconfig.json --outDir dist/esm", |
There was a problem hiding this comment.
I believe there is the need for only one declaration - this mirrors the "types" key on the package.json that I believe is missing as well
There was a problem hiding this comment.
Having generated types only in the root folder /dist doesn't work for imports from /dist/esm even if the package.json has this set: "types": "dist/types/index.d.ts" because in the case of ESM import the import path prefix is not / (index) but /dist/esm which doesn't match any types path.
I found that the simplest approach would be to create a copy of the types in dist/esm to have the default TS resolution work for ESM modules.
There was a problem hiding this comment.
I see. Shouldn't we have any types key tough ?
There was a problem hiding this comment.
I don't think it is required since the generated type path for CJS is /dist/index.d.ts which matches the imported path @canonical/react-components (index.js). Also for ESM, the same logic applies if we use a copy of the types in /dist/esm.
There was a problem hiding this comment.
We can be explicit about it, but it is not required since it is automatically resolved based on the file name.
|
The issue with Percy and iframe has been fixed (#1145) so rebasing this branch on main should fix this problem here. |
|
🎉 This PR is included in version 1.7.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Done
/distwhich can be used by importing fromimport { Button } from "@canonical/react-components/dist/esm"./dist/esmto get the type auto resolution working for the ESM modules.