[Bug]: Addons cant use react 18 hooks (useId, useInsertionEffect)

[codebutler]

Describe the bug

Addons can't use newer React 18 APIs even when the correct version of react is being used. This is because the symbols are missing from here: https://github.com/storybookjs/storybook/blob/next/code/ui/manager/src/globals/exports.ts#L6

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

    .storybook/addon-form/panel.tsx:12:9:
      12 │ import { useId, useInsertionEffect } from "react";
         ╵          ~~~~~

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

    .storybook/addon-form/panel.tsx:12:16:
      12 │ import { useId, useInsertionEffect } from "react";
         ╵                 ~~~~~~~~~~~~~~~~~~

I ran into this when trying to use Chakra-UI in an addon:

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:21:
      1 │ import { useContext, useId, useEffect } from 'react';
        ╵                      ~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:2:9:
      2 │ import { useId, useRef, useInsertionEffect } from 'react';
        ╵          ~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:2:24:
      2 │ import { useId, useRef, useInsertionEffect } from 'react';
        ╵                         ~~~~~~~~~~~~~~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:2:9:
      2 │ import { useId, useMemo } from 'react';
        ╵          ~~~~~

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

    node_modules/framer-motion/dist/es/value/use-spring.mjs:1:29:
      1 │ import { useContext, useRef, useInsertionEffect } from 'react';
        ╵                              ~~~~~~~~~~~~~~~~~~

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

    node_modules/framer-motion/dist/es/utils/use-motion-value-event.mjs:1:9:
      1 │ import { useInsertionEffect } from 'react';
        ╵          ~~~~~~~~~~~~~~~~~~

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

    node_modules/@chakra-ui/toast/dist/chunk-ZP4IHIHZ.mjs:14:9:
      14 │ import { useSyncExternalStore } from "react";
         ╵          ~~~~~~~~~~~~~~~~~~~~

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

    node_modules/@chakra-ui/accordion/dist/chunk-JDQBKIKM.mjs:11:33:
      11 │ import { useCallback, useEffect, useId, useRef, useState } from "react";
         ╵                                  ~~~~~

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

    node_modules/@chakra-ui/form-control/dist/chunk-PXXQR4UW.mjs:11:22:
      11 │ import { useCallback, useId, useState } from "react";
         ╵                       ~~~~~

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

    node_modules/@chakra-ui/hooks/dist/chunk-EGV7XMQK.mjs:2:22:
      2 │ import { useCallback, useId as useReactId, useMemo, useState } from "react";
        ╵                       ~~~~~

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

    node_modules/@chakra-ui/react-use-disclosure/dist/index.mjs:3:32:
      3 │ import { useCallback, useState, useId } from "react";
        ╵                                 ~~~~~

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

    node_modules/@chakra-ui/menu/dist/chunk-CRQSZOKU.mjs:30:2:
      30 │   useId,
         ╵   ~~~~~

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

    node_modules/@chakra-ui/modal/dist/chunk-R5DTDXZR.mjs:10:33:
      10 │ import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
         ╵                                  ~~~~~

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

    node_modules/@chakra-ui/pin-input/dist/chunk-E34PQC4X.mjs:7:43:
      7 │ import { useCallback, useEffect, useState, useId } from "react";
        ╵                                            ~~~~~

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

    node_modules/@chakra-ui/popover/dist/chunk-BOXNG7YC.mjs:13:33:
      13 │ import { useCallback, useEffect, useId, useRef, useState } from "react";
         ╵                                  ~~~~~

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

    node_modules/@chakra-ui/radio/dist/chunk-ROBJ47HJ.mjs:4:40:
      4 │ import { useCallback, useRef, useState, useId } from "react";
        ╵                                         ~~~~~

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

    node_modules/@chakra-ui/radio/dist/chunk-BMSD5HC2.mjs:24:43:
      24 │ import { useCallback, useEffect, useState, useId } from "react";
         ╵                                            ~~~~~

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

    node_modules/@chakra-ui/slider/dist/chunk-URECC76Z.mjs:25:49:
      25 │ import { useCallback, useMemo, useRef, useState, useId } from "react";
         ╵                                                  ~~~~~

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

    node_modules/@chakra-ui/slider/dist/chunk-RO527DKG.mjs:25:39:
      25 │ import { useCallback, useMemo, useRef, useId, useState } from "react";
         ╵                                        ~~~~~

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

    node_modules/@chakra-ui/tabs/dist/chunk-ROBISDLO.mjs:16:2:
      16 │   useId,
         ╵   ~~~~~

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

    node_modules/@chakra-ui/tooltip/dist/chunk-GOQMVUD7.mjs:11:2:
      11 │   useId
         ╵   ~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:21:
      1 │ import { useContext, useId, useEffect } from 'react';
        ╵                      ~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:2:9:
      2 │ import { useId, useRef, useInsertionEffect } from 'react';
        ╵          ~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:2:24:
      2 │ import { useId, useRef, useInsertionEffect } from 'react';
        ╵                         ~~~~~~~~~~~~~~~~~~

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

    node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:2:9:
      2 │ import { useId, useMemo } from 'react';
        ╵          ~~~~~

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

    node_modules/framer-motion/dist/es/value/use-spring.mjs:1:29:
      1 │ import { useContext, useRef, useInsertionEffect } from 'react';
        ╵                              ~~~~~~~~~~~~~~~~~~

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

    node_modules/framer-motion/dist/es/utils/use-motion-value-event.mjs:1:9:
      1 │ import { useInsertionEffect } from 'react';
        ╵          ~~~~~~~~~~~~~~~~~~

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

    node_modules/@chakra-ui/toast/dist/chunk-ZP4IHIHZ.mjs:14:9:
      14 │ import { useSyncExternalStore } from "react";
         ╵          ~~~~~~~~~~~~~~~~~~~~

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

    node_modules/@chakra-ui/accordion/dist/chunk-JDQBKIKM.mjs:11:33:
      11 │ import { useCallback, useEffect, useId, useRef, useState } from "react";
         ╵                                  ~~~~~

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

    node_modules/@chakra-ui/form-control/dist/chunk-PXXQR4UW.mjs:11:22:
      11 │ import { useCallback, useId, useState } from "react";
         ╵                       ~~~~~

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

    node_modules/@chakra-ui/hooks/dist/chunk-EGV7XMQK.mjs:2:22:
      2 │ import { useCallback, useId as useReactId, useMemo, useState } from "react";
        ╵                       ~~~~~

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

    node_modules/@chakra-ui/react-use-disclosure/dist/index.mjs:3:32:
      3 │ import { useCallback, useState, useId } from "react";
        ╵                                 ~~~~~

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

    node_modules/@chakra-ui/menu/dist/chunk-CRQSZOKU.mjs:30:2:
      30 │   useId,
         ╵   ~~~~~

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

    node_modules/@chakra-ui/modal/dist/chunk-R5DTDXZR.mjs:10:33:
      10 │ import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
         ╵                                  ~~~~~

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

    node_modules/@chakra-ui/pin-input/dist/chunk-E34PQC4X.mjs:7:43:
      7 │ import { useCallback, useEffect, useState, useId } from "react";
        ╵                                            ~~~~~

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

    node_modules/@chakra-ui/popover/dist/chunk-BOXNG7YC.mjs:13:33:
      13 │ import { useCallback, useEffect, useId, useRef, useState } from "react";
         ╵                                  ~~~~~

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

    node_modules/@chakra-ui/radio/dist/chunk-ROBJ47HJ.mjs:4:40:
      4 │ import { useCallback, useRef, useState, useId } from "react";
        ╵                                         ~~~~~

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

    node_modules/@chakra-ui/radio/dist/chunk-BMSD5HC2.mjs:24:43:
      24 │ import { useCallback, useEffect, useState, useId } from "react";
         ╵                                            ~~~~~

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

    node_modules/@chakra-ui/slider/dist/chunk-URECC76Z.mjs:25:49:
      25 │ import { useCallback, useMemo, useRef, useState, useId } from "react";
         ╵                                                  ~~~~~

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

    node_modules/@chakra-ui/slider/dist/chunk-RO527DKG.mjs:25:39:
      25 │ import { useCallback, useMemo, useRef, useId, useState } from "react";
         ╵                                        ~~~~~

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

    node_modules/@chakra-ui/tabs/dist/chunk-ROBISDLO.mjs:16:2:
      16 │   useId,
         ╵   ~~~~~

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

    node_modules/@chakra-ui/tooltip/dist/chunk-GOQMVUD7.mjs:11:2:
      11 │   useId
         ╵   ~~~~~

To Reproduce

// in a file loaded by the manager:

import { useId, useInsertionEffect } from "react";

export const MyPanel = () = > {
  const id = useId();
  useInsertionEffect(() => {});
  /* etc... */
}

System

Environment Info:

  System:
    OS: macOS 12.6.3
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.16.0 - ~/Library/Caches/fnm_multishells/96873_1675955800881/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/Library/Caches/fnm_multishells/96873_1675955800881/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 16.3
  npmPackages:
    @storybook/addon-actions: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/addon-docs: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/addon-essentials: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/addon-interactions: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/addons: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/api: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/cli: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/manager-api: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/node-logger: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/preview-api: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/react: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/react-vite: ^7.0.0-beta.44 => 7.0.0-beta.44
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

No response

[shilman]

Closing this as a duplicate of #20378 cc @valentinpalkovic

[joriswitteman]

Is there a workaround for suppressing the errors? { typescript: { check: false } } in main.js doesn't help.

I'm not developing add-ons by the way, rather, using some of our design system functions to supplement manager.js with functionality.

[Jason-Jeong-Dev]

I think there is an error when using the component of framer motion in storybook 7.0.

The same error came out when I used the storybook in the package using framer motion.

"framer-motion": "^9.0.2"

ERR!  Error: Build failed with 9 errors:
ERR! ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:2:9: ERROR: No matching export in "global-externals:react" for import "useId"
ERR! ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs:2:24: ERROR: No matching export in "global-externals:react" for import "useInsertionEffect"
ERR! ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs:2:9: ERROR: No matching export in "global-externals:react" for import "useId"
ERR! ../../node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs:1:21: ERROR: No matching export in "global-externals:react" for import "useId"
ERR! ../../node_modules/framer-motion/dist/es/utils/use-motion-value-event.mjs:1:9: ERROR: No matching export in "global-externals:react" for import "useInsertionEffect"

Is there any solution?