material-ui
material-ui copied to clipboard
mui
Cannot read properties of undefined (reading '__emotion_styles')
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Steps to reproduce 🕹
No response
Current behavior 😯
Hi team, when I am running my app, I am receiving following error which emerges from one of MUI files:
I am not able to reproduce it outside in codesandbox but putting it up here to check if there is anyone has idea why this might occur which I can look into. Any help here would be appreciated.
Expected behavior 🤔
No response
Context 🔦
No response
Your environment 🌎
npx @mui/envinfo
System:
OS: Linux 3.10 Red Hat Enterprise Linux Server 7.9
Binaries:
Node: 16.18.1
Yarn: 1.22.11
npm: 7.23.0
Browsers:
Chrome
npmPackages:
@emotion/react: 11.10.5
@emotion/styled: 11.10.5
@mui/base: 5.0.0-alpha.84
@mui/core-downloads-tracker: 5.11.5
@mui/icons-material: 5.11.0
@mui/lab: 5.0.0-alpha.87
@mui/material: ^5.1.0 => 5.11.5
@mui/private-theming: 5.11.2
@mui/styled-engine: 5.11.0
@mui/system: 5.11.5
@mui/types: 7.2.3
@mui/utils: 5.11.2
@mui/x-date-pickers: 5.0.0-alpha.1
@types/react: 18.0.27
react: ^17.0.0 => 17.0.2
react-dom: ^17.0.0 => 17.0.2
styled-components: 5.0.1 => 5.0.1
typescript: ^4.3.5 => 4.9.4
It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
@mnajdova I won't be able to give you access to repository link and as I said I am unable to reproduce the same issue in codesandbox. Will you be able to tell some possible reasons for this issue as this stems from @mui/styled-engine/node/index.js file ?
Another user has pointed the same issue here: https://github.com/storybookjs/storybook/issues/20162
Are you using emotion or styled-components as a styling solution? For the reproduction, you don't have to give me access to your repository, just try to reproduce when it is happening and share it with codesandbox.
We are using emotion as a styling solution. Let me try if I can reproduce the issue.
I'm experiencing a similar issue.
Uncaught TypeError: Cannot read properties of undefined (reading '__emotion_styles')
at internal_processStyles (index.js:28:25)
at createStyled.js:88:17
at fWt6r.@babel/runtime/helpers/esm/objectWithoutPropertiesLoose (Slider.js:268:31)
at newRequire (index.6fa4ea68.js:71:24)
at localRequire (index.6fa4ea68.js:84:35)
at kbsfP../Slider (index.js:1:1)
at newRequire (index.6fa4ea68.js:71:24)
at localRequire (index.6fa4ea68.js:84:35)
at cs5T3../colors (index.js:190:1)
at newRequire (index.6fa4ea68.js:71:24)
at localRequire (index.6fa4ea68.js:84:35)
at 7TYfF.react/jsx-runtime (common.mjs:15:1)
at newRequire (index.6fa4ea68.js:71:24)
at localRequire (index.6fa4ea68.js:84:35)
at kjLP2.react/jsx-dev-runtime (index.tsx:4:1)
at newRequire (index.6fa4ea68.js:71:24)
at index.6fa4ea68.js:122:5
at index.6fa4ea68.js:145:3
index.js:1 Could not get the stack frames of error: Error: "/common/node_modules/@mui/material/esm/Slider/Slider.js" is not in the SourceMap.
at c.sourceContentFor (index.js:1:28259)
at e.value (index.js:1:42421)
at index.js:1:44811
at Array.map (<anonymous>)
at index.js:1:44586
at s (index.js:1:14189)
at Generator._invoke (index.js:1:13977)
at Generator.next (index.js:1:14614)
at N (index.js:1:41680)
at i (index.js:1:41883)
environment details:
System:
OS: macOS 13.1
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.2/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
Chrome: 109.0.5414.119
Edge: Not Found
Firefox: 109.0
Safari: 16.2
npmPackages:
@emotion/react: ^11.10.5 => 11.10.5
@emotion/styled: ^11.10.5 => 11.10.5
@mui/base: ^5.0.0-alpha.115 => 5.0.0-alpha.115
@mui/core-downloads-tracker: 5.11.6
@mui/material: ^5.11.6 => 5.11.6
@mui/private-theming: 5.11.2
@mui/styled-engine: 5.11.0
@mui/system: ^5.11.5 => 5.11.5
@mui/types: 7.2.3
@mui/utils: 5.11.2
@types/react: ^18.0.8 => 18.0.27
react: ^18.2.0 => 18.2.0
react-dom: 18.2.0
typescript: ^3.9.10 => 3.9.10
Happy to provide more information if needed.
I encountered the same issue today. It's really hard to reproduce. Will investigate more. The weird thing is, when I have the same styled component like
const ToolbarStyle = styled(Box)(({ theme }) => ({})); in 2 different places. One gives me Uncaught TypeError: Cannot read properties of undefined (reading '__emotion_styles'). In the other place this doesn't happen.
If I just use a bare div this doesn't happen.
Recently we got to know that there were some internal cyclic dependencies. So resolving those cyclic dependencies helped us get rid of this error. You can try using webpack's cyclic dependency plugin to know if there are any cyclic dependencies.
Ref: https://github.com/aackerman/circular-dependency-plugin
I encountered this issue today when running our projects tests. Several tests failed with this same error. But the application ran fine. One of our low level utility files was importing a TS type from a module's default index file. 💥 This creates a circular dependency with our pages that depend on components of that offending module. Updating our utility file to import the type from the defining file directly rather than the default index fixes the issue.
// Some utility file.tsx
import { Thing } from 'xx/module/Thing'; // Broken
import { Thing } from 'xx/module/Thing/Thing.type.ts' // Working
In my case I get this error importing components from @mui/lab and exporting them from a react library made with rollup bundler and then styling the component inside the app that is using the library.
once I do
import { ComponentFromLib } from 'my-library'
const styledComponent = styled(ComponentFromLib)({ ... })
I get the error....it seems the styled function receives something weir
:heavy_check_mark: I fixed it by installing every module separately as an example: If you're trying to import styled @mui/system just install it by your package manager, another example if your trying to import @mui/base/TextareaAutosize just install the module @mui/base by your package manger.
If you encounter this error, my recommendation is to identify which component is causing the error, you found the component? Okay. then install the mui dependencies separately.
In my case I am using TextareaAutosize from @mui/base/TextareaAutosize, so I went and install the dependency by npm i @mui/base it worked like charm. Before installing the dependency I got this error Cannot read properties of undefined (reading '__emotion_styles')
On my case, it was a very specific scenario where the consumer of my react library was using yarn resolutions for an underlaying common dependency, the resolved library version didn't have the component I was trying to style (was introduced in a later version)
graph TD;
Consumer[Consumer<br/><br/>deps:<br/>core-1.0.3<br/>components-lib-1.0.3<br/><br/>resolutions:<br/>core-1.0.0]
Core[Core<br/>1.0.0];
CoreNew[Core<br />1.0.3];
ComponentsLib[ComponentsLib<br/>1.0.3<br/><br/>peers:<br/>core-1.0.3];
Accordion[Accordion - undefined];
AccordionNew[Accordion];
StyledAccordion[StyledAccordion - error on import]
Consumer --> Comp1;
Consumer --> StyledAccordion;
Comp1 --> Core
StyledAccordion --> ComponentsLib --> Accordion --> Core;
AccordionNew --> CoreNew;
I would have expected something to fail at the build level but i guess this depends on the toolchain used
resolved by removing the resolution / updating it to 1.0.3
Note: this resolution was there in order to gradually integrate the library, when the library was updated the resolution was forgotten, debugged this by going into the dependency node_modules folder and noticing it was using a different version of our core library than the one specified in the root package json
I had this issue in a Vite/SWC/Emotion setup (though without MUI - just bare Emotion). The workaround was to swap SWC back to Babel. Here's the relevant part of vite.config.ts:
react({
jsxImportSource: '@emotion/react',
babel: {
plugins: [['@emotion/babel-plugin', { sourceMap: true, autoLabel: 'always' }]],
},
}),
I had this issue by using pnpm instead of npm for my project. Deleting node_modules and running npm i worked for me.
In my case I get this error importing components from @mui/lab and exporting them from a react library made with rollup bundler and then styling the component inside the app that is using the library.
once I do
import { ComponentFromLib } from 'my-library'
const styledComponent = styled(ComponentFromLib)({ ... })
I get the error....it seems the styled function receives something weir
how did u end up resolving this? im experiencing something identical.
I'm experiencing this problem now while trying to upgrade from MUI 5 to 6. Everything was working fine before the upgrade. I haven't really changed anything related to imports. Has anyone had this problem was trying to migrate to 6?
I experienced this error message in my Jest unit tests. It specifically occurred when I wrote tests for a component which imported pre-styled MUI components from a shared library.
I fixed it by updating the imports in my shared library to use more targeted MUI imports:
// BEFORE
import { Tab, styled } from "@mui/material";
// AFTER
import Tab from "@mui/material/Tab";
import { styled } from "@mui/material/styles";
I'm also facing the same problem while trying to upgrade MUI-x packages (datagrid and date-picker) from version 6.20.5 to 7.29.4. As a result, I had to update some of the dependent packages as well. This specifically started happening after I deleted node_modules and package-lock.json in order to do a fresh install. Still looking out for a solution or a proper workaround.
