[core] Fix useSyncExternalStoreWithSelector in React 17

[bernardobelchior]

Fix useSyncExternalStore import error in React 17. use-sync-external-store/with-selector does not import the shim, so it broke in React 17 which does not support useSyncExternalStore. The fix is to import use-sync-external-store/shim/with-selector.

This use-sync-external-store/with-selector import was added in this commit, so it isn't in any release yet.

Error reproduction

Fix confirmation

More info: mui/mui-x#18303 (comment)

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2090

commit: 4b73d64

[mui-bot]

Bundle size report

Total Size Change: 🔺+1.55KB^(+0.11%) - Total Gzip Change: 🔺+424B^(+0.09%)
Files: 41 total (0 added, 0 removed, 2 changed)

Show details for 41 more bundles

@base-ui-components/react parsed: 🔺+777B^(+0.25%) gzip: 🔺+214B^(+0.23%)
@base-ui-components/react/select parsed: 🔺+777B^(+0.66%) gzip: 🔺+210B^(+0.53%)
@base-ui-components/react/accordion parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/alert-dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/checkbox-group parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/collapsible parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/context-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/direction-provider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/field parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/fieldset parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/form parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/input parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/menu parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/menubar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/merge-props parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/meter parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/navigation-menu parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/number-field parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/popover parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/preview-card parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/progress parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/radio parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/radio-group parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/scroll-area parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/separator parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/slider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/switch parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/tabs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/toast parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/toggle parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/toggle-group parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/toolbar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/tooltip parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/unstable-no-ssr parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/unstable-use-media-query parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/use-render parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@base-ui-components/react/utils parsed: 0B^(0.00%) gzip: 0B^(0.00%)
Base UI checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 4b73d64

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	4b73d64
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/68482802aeeb880008660bba
😎 Deploy Preview	https://deploy-preview-2090--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.