Error when building 5.3.0 with React 17 ('useId' is not exported from 'react')

[ryanadhi]

"material-ui-popup-state": "^5.3.0"
"react": "17.0.2"

code

 <PopupState variant="popover" popupId="demoMenu">
            {popupState => (
                <ClickAwayListener onClickAway={(event) => popupState.close(event as any)}>
                  ...
                </ClickAwayListener>
            )}
</PopupState>

error

Failed to compile.

./node_modules/material-ui-popup-state/hooks.mjs
Attempted import error: 'useId' is not exported from 'react' (imported as 'React').

[jedwards1211]

That's unfortunate, I had tried to make it only use useId if it's available...what bundler are you using?

[ryanadhi]

@jedwards1211 I am using Next 12.1.0, so I just use next build && next export. I believe it is using using Webpack

[jedwards1211]

Okay thanks, I'll figure it out

[jedwards1211]

🎉 This issue has been resolved in version 5.3.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[jedwards1211]

Okay this change fixed the issue in a Next 12.3.4 project for me (was having other problems figuring out how to downgrade the created project all the way to 12.1.0) but let me know if it fixes the issue for you

Edit: I downgraded to Next 12.1.0 and commented out some CSS imports, and I was able to get the build to pass

[ryanadhi]

@jedwards1211 yes I am able to build with 5.3.1. Thanks!

[jedwards1211]

Great, yw!