TypeError: Cannot use 'in' operator to search for 'colorSchemes' in null

[Hammond2789]

Steps to reproduce

Steps:

import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
const thisTheme = createTheme({});
...
render() {
    return (
      <div className="App" style={{ height: "100%" }}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider
            theme={thisTheme}
          >
            <SnackbarProvider
              domRoot={document.getElementById("notification-container")}
              iconVariant={{
                info: <NotificationsActive style={{ marginRight: 8 }} />,
              }}
            >
...
            </SnackbarProvider>
          </ThemeProvider>
        </StyledEngineProvider>
      </div>
    );
  }

Current behavior

When I try to open my web application I get the following error from within ThemeProvider line 20.

TypeError: Cannot use 'in' operator to search for 'colorSchemes' in null

Expected behavior

Not to get that error.

Context

I am attempting to upgrade to material v6 from v5. I believe I have followed the instructions from the upgrade webpage.

I have checked the documentation for Themes and I do not see any changes from v5 (please tell me if I am wrong).

Your environment

npx @mui/envinfo

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: 131.0.6778.86
Edge: Chromium (128.0.2739.67)
npmPackages:
@emotion/react: ^11.13.5 => 11.13.5
@emotion/styled: ^11.13.5 => 11.13.5
@mui/base: ^5.0.0-beta.62 => 5.0.0-beta.62
@mui/core-downloads-tracker: 6.1.8
@mui/icons-material: ^6.0.0 => 6.1.8
@mui/lab: ^6.0.0-beta.16 => 6.0.0-beta.16
@mui/material: ^6.0.0 => 6.1.8
@mui/private-theming: 6.1.8
@mui/styled-engine: 6.1.8
@mui/system: 6.1.8
@mui/types: 7.2.19
@mui/utils: 6.1.8
@mui/x-date-pickers: ^7.22.2 => 7.22.3
@mui/x-internals: 7.21.0
@mui/x-tree-view: ^7.22.1 => 7.22.1
@types/react: 18.3.12
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1

Search keywords: colorSchemes

[siriwatknp]

@Hammond2789 please provide a reproducible sandbox or a repo that I can take a look.

[Hammond2789]

I fixed the problem. The problem came from the fact I had a second

    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={{[THEME_ID]:thisTheme}}>

further down in the application, removing this stopped the error.

[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

@Hammond2789 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.