ESM interop Nextjs

[florianbepunkt]

I'm using this library as part of my own library of shared components, which is imported into a Next.js app. This gives me an ESM error however: Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Anyone else experiencing similar problems? I find it quite hard to pinpoint the issue, but it seems that import Sheet from "react-modal-sheet"; is importing it from "dist/index.js" instead of "dist/react-modal-sheet.esm.js"

[Temzasse]

Hi 👋🏻 Can you please provide a reproduction case?

[MoOx]

Another problem with Next.js 13 is now

error - Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/moox/{project}/node_modules/react-merge-refs/dist/index.mjs not supported.
Instead change the require of /Users/moox/{project}/node_modules/react-merge-refs/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

So sure, it's related to react-merge-refs, but it's this module calling it. I can't find a solution to be able to compile

[FourLineCode]

Experiencing the same issue in Next.js 13.

[sujjeee]

hey im also facing same error

Error: require() of ES Module F:\Web Designs\blackrobe\frontend\node_modules\react-merge-refs\dist\index.mjs not supported. Instead change the require of F:\Web Designs\blackrobe\frontend\node_modules\react-merge-refs\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.

[fishuke]

I am facing the same problem.

[berendvangaart]

I'm experiencing the same issue in Nextjs 13

[angelamelinda]

Facing the same issue in Next.JS 13

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/angela.melinda/Documents/onboarding/project/node_modules/react-merge-refs/dist/index.mjs not supported.
Instead change the require of /Users/angela.melinda/Documents/onboarding/project/node_modules/react-merge-refs/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

[scroobius-pip]

Fixed with: experimental.esmExternals: 'loose' in nextjs config file

[angelamelinda]

I found an alternative way so I could use the library https://kenneho.net/2022/09/03/resolving-error-err_require_esm-require-of-es-module-in-nextjs/

[Knaackee]

I had the same problem (react-modal-sheet@1.10.0, Next.js 13). I've downgraded to version 1.9.0 which uses an older version of react-merge-refs.

It's now working.

[blackMoja]

The same issue occurred for me. Is there any way to solve it?

The version of react-merge-refs currently being used in the project appears to be 2.0.1.

This library does not seem to support cjs from 2.0.0. 🤔

Link : https://github.com/gregberge/react-merge-refs/pull/17

[husbycodereis]

downgrading react merge refs as below fixed the issue for me in yarn.lock

react-merge-refs@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06" integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==

[Temzasse]

The react-merge-refs dependency has been removed: https://github.com/Temzasse/react-modal-sheet/releases/tag/v1.10.1

Hopefully it fixes this issue 🙂