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.

Named export 'asap' not found / NextJS

See original GitHub issue

Describe the bug Hi! I am a DnD newbie, and have been out of all of the details of the JavaScript/webpack moduling and tooling world for a while, so can’t figure this out even though this might be really easy for some of you to figure out.

I am using NextJS (12.0.10) and React (17.0.2). I don’t access to their internal webpack config. When trying to import the DnD useDrag export (version 15.1.0) for the first time, I see this error:

SyntaxError: Named export 'asap' not found. The requested module '@react-dnd/asap' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@react-dnd/asap';
const { asap } = pkg;

Begins with this call stack item:

dnd-core/dist/esm/classes/HandlerRegistryImpl.mjs (6)

Reproduction

Steps to reproduce the behavior:

npx create-react-app
cd <project_name>
npm install --save react-dnd react-dnd-html5-backend
In pages/index.js, import using import { useDrag } from 'react-dnd'

Additional context A downgrade to v14 makes the issue go away.

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

dustin-Hcommented, Mar 8, 2022

Hi @darthtrevino, thanks for fixing that issue.

It seems to be released in version 15.1.2. (https://github.com/react-dnd/react-dnd/releases/tag/v15.1.2) However, this versions hasn’t been released on npm.

Could you please release it there? 😃 Thanks! 🍻

1reaction

darthtrevinocommented, Feb 7, 2022

This is definitely something that’s fixable, and I’ll plan on verifying that those dependencies are ESM.

I also added a Next.JS tester in the app here (https://github.com/react-dnd/react-dnd/pull/3384), and it appears to work fine as-is

Top Results From Across the Web

Nextjs fails to detect ESM modules correctly when using ...

Next.js fails to resolve sub dependencies correctly and tries to load CJS from ESM modules, causing the build to fail. SyntaxError: Named export ......

module-not-found - Next.js

The module you're trying to import uses Node.js specific modules, for example dns , outside of getStaticProps / getStaticPaths / getServerSideProps. Possible ...

Why next.js does not export named export? - Stack Overflow

You cannot use export default and export in single document. If you have multiple export items write code like below.

asap-esmodule-browser-export: Docs & Reviews | Openbase

asap -esmodule-browser-export documentation, tutorials, reviews, alternatives, ... The /es/index-nodeps.js file is similar but does not include dependencies.

bit-src/Bit - Gitter

I am just trying to get rid of an error using very simple .d.ts file. declare module 'component-name' { const noTypesYet: any; export...