@mui/material with React 18 not working: export \'useContext\' (imported as \'useContext\') was not found in \'react\'答案

【问题标题】：@mui/material with React 18 not working: export 'useContext' (imported as 'useContext') was not found in 'react'@mui/material with React 18 not working: export \'useContext\' (imported as \'useContext\') was not found in \'react\'
【发布时间】：2022-08-07 02:19:43
【问题描述】：

在将 @mui/material 与 React 18.1.0 和 React-Dom 18.1.0 一起使用时，我遇到了一系列情感和反应之间的兼容性问题。这很奇怪，因为我确实安装了最新版本的 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\",

标签： reactjs webpack material-ui

【解决方案1】：

// is you import it like that

从“反应”导入 { useContext }； // 这对我来说很好

从'react'导入useContext； // 这将给出一个错误，就像你所拥有的一样

【讨论】：

【解决方案2】：

将此库与 Webpack 一起使用时，我曾多次发生此错误。

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

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

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

【讨论】：