tailwind-preset.ts with @headleussui/tailwindcss

[bart-sofomo]

Hi,
I'm using tailwind-preset.ts like this:

import TailwindAnimate from 'tailwindcss-animate';

import HeadlessUiTailwind from '@headlessui/tailwindcss';
import type { Config } from 'tailwindcss';

export default {
  darkMode: ['class'],
  ...
  
  plugins: [TailwindAnimate, HeadlessUiTailwind({})],
} satisfies Partial<Config>;

and when I'm trying to build storybook or build my library with vite I'm getting:

(node:18297) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
failed to load config from /libs/components/vite.config.ts
Unable to create nodes for libs/components/vite.config.ts using plugin @nx/vite/plugin. 

         Inner Error: /libs/components/node_modules/@headlessui/tailwindcss/dist/headlessui.esm.js:1
import a from"tailwindcss/plugin";var o=a.withOptions(({prefix:s="ui"}={})=>({addVariant:t})=>{for(let e of["open","checked","selected","active","disabled"])t(`${s}-${e}`,[`&[data-headlessui-state~="${e}"]`,`:where([data-headlessui-state~="${e}"]) &`]),t(`${s}-not-${e}`,[`&[data-headlessui-state]:not([data-headlessui-state~="${e}"])`,`:where([data-headlessui-state]:not([data-headlessui-state~="${e}"])) &:not([data-headlessui-state])`]);t(`${s}-focus-visible`,":where([data-headlessui-focus-visible]) &:focus"),t(`${s}-not-focus-visible`,"&:focus:where(:not([data-headlessui-focus-visible] &))")});export{o as default};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

 >  NX   Unable to create nodes for libs/components/vite.config.ts using plugin @nx/vite/plugin. 

   
         Inner Error: /libs/components/node_modules/@headlessui/tailwindcss/dist/headlessui.esm.js:1
   import a from"tailwindcss/plugin";var o=a.withOptions(({prefix:s="ui"}={})=>({addVariant:t})=>{for(let e of["open","checked","selected","active","disabled"])t(`${s}-${e}`,[`&[data-headlessui-state~="${e}"]`,`:where([data-headlessui-state~="${e}"]) &`]),t(`${s}-not-${e}`,[`&[data-headlessui-state]:not([data-headlessui-state~="${e}"])`,`:where([data-headlessui-state]:not([data-headlessui-state~="${e}"])) &:not([data-headlessui-state])`]);t(`${s}-focus-visible`,":where([data-headlessui-focus-visible]) &:focus"),t(`${s}-not-focus-visible`,"&:focus:where(:not([data-headlessui-focus-visible] &))")});export{o as default};
   ^^^^^^
   
   SyntaxError: Cannot use import statement outside a module
       at internalCompileFunction (node:internal/vm:77:18)
       at wrapSafe (node:internal/modules/cjs/loader:1288:20)
       at Module._compile (node:internal/modules/cjs/loader:1340:27)
       at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
       at Module.load (node:internal/modules/cjs/loader:1207:32)
       at Module._load (node:internal/modules/cjs/loader:1023:12)
       at cjsLoader (node:internal/modules/esm/translators:356:17)
       at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
       at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
       at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

Anyone knows how to fix this? I have to use typescript for various reasons.

If I remove HeadlessUiTailwind({}) everything works as expected.

[dawnmist]

I am running into the same issues. The library as built is not currently compatible with esm modules (node 20.11.1), but it is very close.

I have been able to get a working build by patching the @headlessui/tailwindcss npm package with the following:

• Add "type": "module" to the @headlessui/tailwindcss package.json file - this tells node.js/compilers that files inside the package that end in the .js extension should be treated as esm files rather than commonjs files. Since the commonjs files in the package all end in .cjs, this setting in package.json will work for both esm imports and commonjs requires.
• Add the missing .js extension to the tailwindcss/plugin import in the .js files - esm files need their imports to include the file extension if they're importing a specific file. i.e. the file contents should start with: import a from"tailwindcss/plugin.js"; for both the dist/index.js and dist/headlessui.esm.js files.

To patch the package, you can either use yarn's patch capabilities if you use yarn, or the npm library patch-package.