Fix esm compatibility for @headlessui/tailwindcss plugin package #3051
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The distributed tailwindcss plugin package uses `.js` for esm files, and `.cjs` for commonjs files. This corresponds to `"type": "module"` in the package.json file. One build script `fix-types.js` was a commonjs script which was breaking this module file naming pattern. Renamed the script to `fix-types.cjs` so that we could then standardise the module type for @headlessui/tailwindcss package as a whole.
ESM imports need to specify the filename extension when importing individual files.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Guys, can we merge this? This is preventing me migrating my Remix app to Vite as this plugin won't work because of ESM compatibility. thanks! |
|
This is also preventing me from installing. A merge would be much appreciated. |
|
@dawnmist 👏🏿 👏🏿 👏🏿 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently the
@headlessui/tailwindcsspackage throws errors when imported into an esm project, stating that imports are not permitted inside commonjs files, as documented in the discussion threads:The current
@headlessui/tailwindcssnpm package distributes its files using the convention.js= esm,.cjs= commonjs. For node/compilers to properly treat the.jsfiles as esm, the package.json needs to also specify that the package "type" is "module". Files ending in.cjswill continue to be treated as commonjs files with that setting. The build scriptscripts/fix-types.jsneeded to be renamed to use the.cjsextension so that it continued to be treated as a commonjs script after the package's type was set to module.When an esm file imports another file, it needs to specify the full filename with extension, so the import of the
tailwindcss/pluginin src/index.ts needed to be specified astailwindcss/plugin.js. Typescript won't automatically add the extension if it was not present when creating the compiled version, so this needed to be specified in the source for it to be present in the distributed version (otherwise it throws file not found errors).