Storybook won't build after upgrading Mantine 7, cites missing useId and useSyncExternalStore

[compact fable]

After upgrading to Mantine v7, our Storybook will no longer build. The build fails with the following errors:

✘ [ERROR] No matching export in "global-externals:react" for import "useId"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mantine/core/esm/core/Box/use-random-classname/use-random-classname.mjs:2:9:
      2 │ import { useId } from 'react';
        ╵          ~~~~~

✘ [ERROR] No matching export in "global-externals:react" for import "useId"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mantine/core/esm/components/Combobox/ComboboxOption/ComboboxOption.mjs:2:16:
      2 │ import React, { useId } from 'react';
        ╵                 ~~~~~

✘ [ERROR] No matching export in "global-externals:react" for import "useSyncExternalStore"

    node_modules/.pnpm/@[email protected][email protected]/node_modules/@mantine/store/esm/store.mjs:2:9:
      2 │ import { useSyncExternalStore } from 'react';
        ╵          ~~~~~~~~~~~~~~~~~~~~

Error: Build failed with 3 errors:
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mantine/core/esm/components/Combobox/ComboboxOption/ComboboxOption.mjs:2:16: ERROR: No matching export in "global-externals:react" for import "useId"
node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mantine/core/esm/core/Box/use-random-classname/use-random-classname.mjs:2:9: ERROR: No matching export in "global-externals:react" for import "useId"
node_modules/.pnpm/@[email protected][email protected]/node_modules/@mantine/store/esm/store.mjs:2:9: ERROR: No matching export in "global-externals:react" for import "useSyncExternalStore"

I've tried replacing our preview.tsx with the example here: https://v7.mantine.dev/guides/storybook#storybook-preview but no luck.

[earnest wigeon]

Mantine 7 requires React 18, you are using 17 or older version

[compact fable]

We're using 18...

Have also done a pnpm why react to check we don't have any 16/17 versions hanging around and it's 18.2.0 all the way

[earnest wigeon]

I do not know then, you get errors that are unique to react 18

[compact fable]

Hmm, I found this issue https://github.com/storybookjs/storybook/issues/20378 and this linked PR https://github.com/storybookjs/storybook/pull/24514 but these are both talking about the manager UI (rather than the preview UI where Mantine components would be rendered in our stories)