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