CODEWITHSUNDEEP
reactjswebpackmaterial-ui
elmir
elmir

Reputation: 97

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

When using @mui/material with React 18.1.0 and React-Dom 18.1.0, I'm getting a series of compatibility issues between emotion and react. This is odd because I do in fact have the latest version of react installed, so I'm not entirely sure what would be causing this.

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)

On the javascript console, I'm seeing:

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)

These are the versions of I'm using

"@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",

Upvotes: 2

Views: 4338

Answers (1)

Tim Mouskhelichvili
Tim Mouskhelichvili

Reputation: 66

This error has happened to me several times when using this library with Webpack.

This error happens because the library is inside a folder with the same name as react's library.

To fix this issue, you need to add a custom alias to your Webpack's config:

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

Upvotes: 5

Related Questions