Incompatibility of resize-observer with Nextjs 12.

[sotirelisc]

Describe the bug
We have updated our project to Next 12 and the following appears when we load a page with a component that uses resize-observer.
SyntaxError: The requested module 'react' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export. For example: import pkg from 'react'; const {useRef: r,useEffect: t}from"react";export default e=>{var a=r(e);return t(()=>{a.current=e}),a} = pkg;

To Reproduce
Steps to reproduce the behavior:

1. Use resize-observer
2. Update to Next 12

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome Version 96.0.4664.110
• @react-hook/resize-observer Version: 1.2.5
• next Version: 12.0.7

[jaredLunde]

Not clear to me this is my issue vs. Next's

[sotirelisc]

Not clear to me this is my issue vs. Next's

Hello, it's not clear to me either. Have you maybe tried to reproduce it?

[jaredLunde]

I'm using other hooks in this group that use the same package.json configurations and import React with Next 12.0.7 and haven't run into any issues so far 🤷🏼‍♂️

[mt-deva]

I'm getting this - NextJS@12^ but it only throws in my Jest@28 tests

[ajubin]

Hi, it may be late, but for future user encountering this issue, I found a fix.

This is the same as here react-hook-form/resolvers#396 (comment)

But instead filter out the pkg this way

    if (typeof pkg.name === 'string' && pkg.name.startsWith('@react-hook/')) {
        delete pkg['exports'];
        delete pkg['module'];
      }

[ricovitch]

Solved it for me. I'm not using next, but had this issue while migrating to jest28 and 29 in a react library project.