@mui/material with React 18 不起作用：在“react”中找不到导出“useContext”（导入为“useContext”）

Question

当在 React 18.1.0 和 React-Dom 18.1.0 中使用 @mui/material 时，我遇到了情感和反应之间的一系列兼容性问题。这很奇怪，因为我实际上安装了最新版本的 React，所以我不完全确定是什么导致了这种情况。

WARNING in ./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js 12:41-54

export 'createContext' (imported as 'createContext') was not found in 'react' (possible exports: CacheProvider, ClassNames, Global, ThemeContext, ThemeProvider, __unsafe_useEmotionCache, createElement, css, jsx, keyframes, useTheme, withEmotionCache, withTheme)


WARNING in ./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js 28:9-19

export 'useContext' (imported as 'useContext') was not found in 'react' (possible exports: CacheProvider, ClassNames, Global, ThemeContext, ThemeProvider, __unsafe_useEmotionCache, createElement, css, jsx, keyframes, useTheme, withEmotionCache, withTheme)

在 javascript 控制台上，我看到：

root.js:3049 Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_5__.createContext) is not a function
    at eval (emotion-element-cbed451f.browser.esm.js?c3e7:12:55)
    at Module../node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js (root.js:74:1)

这些是我正在使用的版本

"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",

Answer 1

当我在 Webpack 中使用这个库时，这个错误已经在我身上发生过好几次了。

发生此错误是因为该库位于与 React 库同名的文件夹内。

要解决此问题，您需要将自定义别名添加到 Webpack 的配置中：

resolve: {
    alias: {
        react: Path.resolve(__dirname, 'node_modules/react')
    },
    [rest of you config]
}