Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TS warning that headlessui/react resolves to an ES module and must be dynamically imported

See original GitHub issue

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.6

What browser are you using?

Firefox

Reproduction URL https://github.com/maplesyrupman/wacky-imports

Describe your issue

When I import { Dialog, Transition } from "@headlessui/react";, I get the following error:

Module '@headlessui/react' cannot be imported using this construct. The specifier only resolves to an ES module, which cannot be imported synchronously. Use dynamic import instead.ts(1471)

However, things seem to be working fine… not sure if this is really a headlessui bug or just a typescript issue.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
thecrypticacecommented, Aug 24, 2022

Ah so I missed that we may have run into this before @maplesyrupman: https://github.com/tailwindlabs/headlessui/issues/1699#issuecomment-1196923579

This should have been fixed in the latest insiders release which you can install with this: npm install @headlessui/react@insiders

0reactions
maplesyrupmancommented, Aug 28, 2022

@thecrypticace Awesome, thanks dude

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error when trying to use dynamic import with module: "es2015"
I get error Dynamic import cannot be used when targeting ECMAScript 2015 modules. ... es modules but it doesn't make sense because import()...
Read more >
How to Bypass ES Modules Errors in Next.js with Dynamic ...
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /path/to/package require() of ES modules is not supported. ES module file as it ...
Read more >
Using React within a dynamically loaded es module
So my dist file contains import React from 'react'; for which the browser has no idea how to resolve, and produces: (index):1 Uncaught...
Read more >
expected the result of a dynamic import() call. instead received
React.lazy takes a function that must call a dynamic import() . This must return a Promise which resolves to a module with a...
Read more >
React, JSX, ES module imports (dynamic too) in browser ...
Package specifier imports support (or import maps): when we import react in reality we should import something like https://cdn.com/react/react.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

@headlessui/tailwindcss does not work with latest version 1.6.7

Next page

disable dialog closing when click outside of dialog