在“react”中找不到导出“useSyncExternalStore”（导入为“React”）答案

【问题标题】：export 'useSyncExternalStore' (imported as 'React') was not found in 'react'在“react”中找不到导出“useSyncExternalStore”（导入为“React”）
【发布时间】：2022-03-29 21:41:52
【问题描述】：

在尝试运行我的项目时，我收到以下错误：


ERROR in ./node_modules/@mui/material/useMediaQuery/useMediaQuery.js 78:16-42

export 'useSyncExternalStore' (imported as 'React') was not found in 'react' (possible exports: Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement, createContext, createElement, createFactory, createRef, forwardRef, isValidElement, lazy, memo, useCallback, useContext, useDebugValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, version)

出现错误的问题文件具有如下所示的函数：

function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
  const getServerSnapshot = React.useMemo(() => {
    if (ssrMatchMedia !== null) {
      const {
        matches
      } = ssrMatchMedia(query);
      return () => matches;
    }

    return getDefaultSnapshot;
  }, [getDefaultSnapshot, query, ssrMatchMedia]);
  const [getSnapshot, subscribe] = React.useMemo(() => {
    if (matchMedia === null) {
      return [getDefaultSnapshot, () => () => {}];
    }

    const mediaQueryList = matchMedia(query);
    return [() => mediaQueryList.matches, notify => {
      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
      mediaQueryList.addListener(notify);
      return () => {
        mediaQueryList.removeListener(notify);
      };
    }];
  }, [getDefaultSnapshot, matchMedia, query]);
  const match = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
// the problem lies on the upper line of code
  return match;
}

我不知道如何解决这个问题，并且已经在谷歌上搜索了一段时间没有找到足够的解决方案，有什么想法吗？

【问题讨论】：

你使用的是什么版本的 react？ useSyncExternalStore 存在于版本 18 的 beta 版本中，但不存在于早期版本中，例如 17。
17.0.2，我认为
useMediaQueryNew 是您编写的函数，还是您从库中导入的函数？
如果你想使用useMediaQueryNew，你需要将你的 react 版本升级到 18 beta。另一种选择是不使用此代码，这意味着重写它（如果它是您的代码库的一部分），或者导入为 react 17 编写的不同版本的库
此外，react 团队似乎已经实现了一个 shim，您可以添加它以允许在旧版本的 react 中使用 useSyncExternalStore：npmjs.com/package/use-sync-external-store

标签： javascript node.js reactjs react-native

【解决方案1】：

当我将 react-scripts 从 4.0.3 升级到 5.0.0 时遇到了同样的问题

Issue 已修复为 @mui/material@^5.2.1

【讨论】：