Conversation
| "license": "MIT", | ||
| "author": "ReadMe <support@readme.io> (https://readme.com)", | ||
| "sideEffects": false, | ||
| "type": "module", |
There was a problem hiding this comment.
Now that this field is here, tsup automatically detects that and flips the extensions so now the dist/ directory looks like this:
.js / .d.ts = ESM
.cjs / .d.cts = CJS
There was a problem hiding this comment.
Correct me if im wrong but now the package is a full esm package
The correct way to fix it would be
"./webpack": {
"require": {
"types": "./dist/webpack.d.ts",
"default": "./dist/webpack.js"
},
"import": {
"types": "./dist/webpack.d.mts",
"default": "./dist/webpack.mjs"
}
},
There was a problem hiding this comment.
One more example, storybookjs/storybook#19269 (comment)
There was a problem hiding this comment.
And this tool can be used to check it https://github.com/arethetypeswrong/arethetypeswrong.github.io
There was a problem hiding this comment.
@prisis that tool is fantastic, thanks for sharing!
The correct way to fix it
We don't need to explicitly define the type declaration files since TS will automatically pick up on the co-located files (see here for more info). This PR was published to oas@21.1 and it appears that the types are being picked up by that website properly:
Correct me if im wrong but now the package is a full esm package
Yeah if you read the PR description, we unfortunately needed to convert it over to ESM in order to get it working properly in another module: node16 + ESM repo I'm working on. If you look at the "before" results in the image below, it wasn't working properly in ESM nor in CJS.
The good thing is that the website says that we're still shipping our main CJS exports with the same warnings as we were before (see the "node16 from CJS" row on this page). Based on the warnings warnings, my guess is that these are issues with our tsup configuration or the code itself and not our package.json exports definition.
Before the exports fixes in this PR (oas@21.0.3):
After the exports fixes in this PR (oas@21.1.1):
|
@prisis FYI! |
🧰 Changes
🧐 Background
When using the latest version of
oasin readmeio/rdme#856, I'm seeing the following TypeScript errors:This is happening because
tsupgenerates two different type declaration files (one for CJS and one for ESM) that have slight differences...Declaration files screenshot
... but the problem is that our
package.jsonexportsfield only references the CJS type declaration files:oas/package.json
Line 10 in fcc0ec4
Per the TypeScript docs:
🌱 Solution
This PR makes two changes our
package.json:typesfields from theexportsobject. Turns out we don't have to specify thetypesfields at all sincetsupnames the declaration files properly so TypeScript automatically loads the co-located declaration files (source)typeover to amoduleand flipped the file extensions accordingly. This was required in order to get the sub-exports working properly inrdme(prettier@3also is a module despite also having CJS exports) — the following weird ass error shows up inrdmeif attempting to build and load inoaswhen it's not a module:📖 Further Reading
You can read about all of this in the TypeScript and Node docs:
https://www.typescriptlang.org/docs/handbook/esm-node.html#packagejson-exports-imports-and-self-referencing
https://nodejs.org/api/packages.html#nested-conditions
🧬 QA & Testing
If you check out this commit of
rdmeandnpm linkit to this branch ofoas, you shouldn't see any build errors.