react-international-phone error when using react v16 with react scripts v4

[jessepinuelas]

Bug

I have an application that uses React 16.14.0 and React Scripts 4.0.3. When trying to utilize react-international-phone and running yarn start it throws the following errors:

react-international-phone/package.json module mjs file causes error

./node_modules/react-international-phone/dist/index.mjs
Can't import the named export 'forwardRef' from non EcmaScript module (only default export is available)

import 'react-international-phone/style.css' causes error

Error: Cannot find module 'react-international-phone/style.css'

Steps to reproduce the behavior:

1. Run an app that uses React 16 and React scripts 4
2. Follow instructions on react-international-phone docs
3. Run yarn start
4. See error

Expected behavior Should be able to utilize react-international-phone input and create react app should bundle and build correctly

Desktop (please complete the following information):

• OS: MacOS Sonoma
• Browser: Chrome

Current work around

I have to change the following in node_modules/react-international-phone/package.json to

"module": "./dist/index.js"

I have to change import 'react-international-phone/style.css' to

../../../node_modules/react-international-phone/dist/index.css