Updating from v5 to v6 doesnt work: createStyled.js:26 Uncaught TypeError: Cannot assign to read only property 'theme' of object '#<Object>'

[BennyAlex]

Steps to reproduce

I am trying to upgrade to v6 and also used the codemods but I am seeing this error.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: 'theme' of object, reateStyled.js:26

[BennyAlex]

I think the error came from using a styled component and passing the theme to it

and the theme was imported from the theme file (createTheme({})

[DiegoAndai]

Hey @BennyAlex, thanks for the report! Could you provide a minimal reproduction? This would help a lot. A repo sharing your project would be perfect. Thank you!

[visualjeff]

I have the same issue here with a component. Exact same error message after upgrading to v6.

npx @mui/envinfo

  System:
    OS: macOS 13.5
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    pnpm: 8.14.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.117
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/base:  5.0.0-beta.61 
    @mui/core-downloads-tracker:  6.1.7 
    @mui/lab: 6.0.0-beta.14 => 6.0.0-beta.14 
    @mui/material:  6.1.6 
    @mui/private-theming:  6.1.7 
    @mui/styled-engine:  6.1.7 
    @mui/system:  6.1.6 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.6 
    @mui/x-date-pickers: 7.22.2 => 7.22.2 
    @mui/x-internals:  7.21.0 
    @mui/x-tree-view:  7.22.1 
    @types/react:  18.3.12 
    react: 18.3.0-canary-2c338b16f-20231116 => 18.3.0-canary-2c338b16f-20231116 
    react-dom: 18.3.0-canary-2c338b16f-20231116 => 18.3.0-canary-2c338b16f-20231116 
    typescript: 5.3.3 => 5.3.3 

Is there any upgrade guidance for who use styled? Any tools out there that can validate our stylings?

[DiegoAndai]

Hey @visualjeff, thanks for the report! Could you provide a minimal reproduction? This would help a lot. A live example would be perfect. A repo or a StackBlitz sandbox would work. Thank you!

[visualjeff]

I think I figured out our issue while creating repro code. Don't pass the theme down as a prop so you can use it to style a component.

const MarkdownText = ({
    textType = 'disclaimer',
    markdownText = 'test 123',
    uniqueId = '123',
    enableFontWeight = true
}: MarkdownTextPropType) => {
    const theme = useTheme();

    return (
        <StyledMarkdownTitleText
            enableFontWeight={enableFontWeight}
            textType={textType}
            theme={theme}
            uniqueId={uniqueId}
        >
            <MarkdownRenderer markdown={markdownText} />
        </StyledMarkdownTitleText>
    );
};

[BennyAlex]

I think I figured out our issue while creating repro code. Don't pass the theme down as a prop so you can use it to style a component.

const MarkdownText = ({
    textType = 'disclaimer',
    markdownText = 'test 123',
    uniqueId = '123',
    enableFontWeight = true
}: MarkdownTextPropType) => {
    const theme = useTheme();

    return (
        <StyledMarkdownTitleText
            enableFontWeight={enableFontWeight}
            textType={textType}
            theme={theme}
            uniqueId={uniqueId}
        >
            <MarkdownRenderer markdown={markdownText} />
        </StyledMarkdownTitleText>
    );
};

thats what I also wrote here

I think the error came from using a styled component and passing the theme to it

and the theme was imported from the theme file (createTheme({})

so thats basically the solution to remove the theme prop from styled components

[visualjeff]

So I think we can close the issue.

[DiegoAndai]

@BennyAlex so I understand you were able to solve the issue on your side as well?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[MosheHM]

i just ending the migration from v4 to v6 and faced the same issue but it didn't come from const theme = createTheme(); and i still can't find the cause of this error

[MosheHM]

I think the error came from using a styled component and passing the theme to it

and the theme was imported from the theme file (createTheme({})

and i think the reason is like @BennyAlex said when you trying to insert the theme and when you take the global theme and use it inside the styled component the scop theme is trying to override the global theme and the global theme is a frozen object and then you get this error TypeError

[BennyAlex]

I think the error came from using a styled component and passing the theme to it
and the theme was imported from the theme file (createTheme({})

and i think the reason is like @BennyAlex said when you trying to insert the theme and when you take the global theme and use it inside the styled component the scop theme is trying to override the global theme and the global theme is a frozen object and then you get this error TypeError

Not sure if withTheme is still needed or even supported. Have you tried without it?

[tianyingchun]

face the same issue too.

⨯ ../../node_modules/@mui/system/esm/createStyled/createStyled.js (26:1) @ attachTheme
⨯ Internal error: TypeError: Cannot assign to read only property 'theme' of object '#'
at attachTheme (../../node_modules/@mui/system/esm/createStyled/createStyled.js:39:15)

[tianyingchun]

it seems that we should not pass
const theme = useTheme() as props for IconButtonStyle

const IconButtonStyle = styled(MuiIconButton, {
  shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape',
})(({ theme, variant, shape, color }: StyleProps) => ({
  position: 'relative',
  '::after': {
  

[MosheHM]

I think the error came from using a styled component and passing the theme to it
and the theme was imported from the theme file (createTheme({})

and i think the reason is like @BennyAlex said when you trying to insert the theme and when you take the global theme and use it inside the styled component the scop theme is trying to override the global theme and the global theme is a frozen object and then you get this error TypeError

Not sure if withTheme is still needed or even supported. Have you tried without it?

you are right the withTheme is not needed but it's still in supported this code is from the prevues version and the codemod to v6 isn't replace it then i deleted it and every thing ok

[MosheHM]

it seems that we should not pass const theme = useTheme() as props for IconButtonStyle

const IconButtonStyle = styled(MuiIconButton, {
  shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape',
})(({ theme, variant, shape, color }: StyleProps) => ({
  position: 'relative',
  '::after': {
  

yes as you can see this is the same,
just in the new version we can't use the global Theme inside a styled component

[DiegoAndai]

Hey @MosheHM, from this: "then i deleted it and every thing ok" I understand you were able to solve your issue?

@tianyingchun seems like your case is the same and can also be solved, as you mention: #44343 (comment)

[tianyingchun]

I avoid passing theme directly into styled's component library 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: Diego Andai ***@***.***> 发送时间: Thursday, November 28, 2024 1:22:55 AM 收件人: mui/material-ui ***@***.***> 抄送: Yingchun Tian ***@***.***>; Mention ***@***.***> 主题: Re: [mui/material-ui] Updating from v5 to v6 doesnt work: createStyled.js:26 Uncaught TypeError: Cannot assign to read only property 'theme' of object '#<Object>' (Issue #44343) Hey @MosheHM<https://github.com/MosheHM>, from this: "then i deleted it and every thing ok" I understand you were able to solve your issue? @tianyingchun<https://github.com/tianyingchun> seems like your case is the same and can also be solved, as you mention: #44343 (comment)<#44343 (comment)> ― Reply to this email directly, view it on GitHub<#44343 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAVTWY7FXRUBJKBWAKX3NVT2CX5W7AVCNFSM6AAAAABRLKYC6CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMBUGQYTIMJUGM>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[MosheHM]

Hey @MosheHM, from this: "then i deleted it and every thing ok" I understand you were able to solve your issue?

@tianyingchun seems like your case is the same and can also be solved, as you mention: #44343 (comment)

Hi @DiegoAndai, indeed that solve the problem

[DiegoAndai]

Closing this as we have found the solution. If you're dealing with the same problem, please checkout this comment.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@BennyAlex How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.