TypeScript compilation fails with "TS1479: The current file is a CommonJS module"

[BurningDog]

Hi! First time using @headlessui but compilation is failing. I'm trying out the Vue Combobox. After npm install @headlessui/vue I've set up the ComboBox inside a Vue component. When I run npm run watch I get this error:

TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@headlessui/vue")' call instead.
  To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field `"type": "module"` to 'package.json'.

The fix

To fix, I removed "type": "module" from node_modules/@headlessui/vue/package.json - I can now compile just fine and the combox box shows up in my browser, as expected.

I got that idea from #1699 (comment) which explores a related TypeScript compilation error - but that was fixed in #1721 in July 2022.

Does anyone know why I am getting this error, and if there's another way to resolve it?

My setup

I'm adding this to a Symfony 6.2 codebase, which uses webpack-encore, which is a light wrapper around webpack.

When running npm run watch (which is encore dev --watch) I get the above compilation error.

• vue version 3.0
• node version 18
• TypeScript version 4.9.5

In my tsconfig.json the relevant compilerOptions are:

    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "resolveJsonModule": true,

[djflorio]

I'm experiencing the same issue with the @headlessui/react library.

A potential workaround is to follow the instructions in the warning to dynamically import the components.

Instead of importing at the top of the file like this:

import { Listbox } from '@headlessui/react';

export const MyComponent = () => {
  return ...
}

Try async/awaiting the import within the component itself:

export const MyComponent = async () => {
  const { Listbox } = await import('@headlessui/react');
  return ...
}

This gets rid of the warning for me. I haven't been able to test it at runtime yet (in the middle of a big refactor), and I have no idea if this is an ideal solution, but it beats having to edit the headlessui package itself.

[djflorio]

Update: I finished my refactor and unfortunately this doesn't work for client components, which don't yet support async/await 😞

[greg-hoarau]

Hello,

I'm not sure about this, but you can use "moduleResolution" : "Bundler" instead of "NodeNext" with Typescript 5.

Good luck

[djflorio]

This worked for me! Note that you also need to make sure module is set to es2015 or later. I'm using module: ES2022 and moduleResolution: Bundler and that fixed the import issue.

[BurningDog]

One of the maintainers realised that this was actually not working properly, and has a fix which will be in the next release. See #2838 (comment)