Reinstall compatibility with react 18 when using ThemeSwitcher component

[ebengtso]

Context

Using ThemeSwitcher alone fails with "Cannot read properties of null (reading 'useSyncExternalStore')"

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. Set dependencies to react 18.3.1
3. In the first customisation example, the ThemeSwitcher does not work
4. I tried locally, I I have this issue:

TypeError: Cannot read properties of null (reading 'useSyncExternalStore') at exports.useSyncExternalStore (/myfolder/node_modules/@toolpad/utils/node_modules/react/cjs/react.production.js:529:33) at useSsr (/myfolder/node_modules/@toolpad/utils/dist/hooks/useSsr.cjs:48:16) at ThemeSwitcher (/myfolder/node_modules/@toolpad/core/node/DashboardLayout/ThemeSwitcher.js:32:37) at Wc (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44) at Zc (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253) at Z (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89) at $c (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98) at bd (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404) at Z (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217) at Zc (/myfolder/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:479)

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

nextjs 14 (latest) latest Toolpad code and mui react 18 (latest)

Search keywords: ThemeSwitcher

[bharatkashyap]

1. Open this link to live example: (required)
2. In the first customisation example, the ThemeSwitcher does not work
3. I tried locally, I I have this issue:

The theme switcher works for each demo in the docs for me; can you provide a reproduction CodeSandbox or StackBlitz link for us to be able to check this?

[bringmetheaugust]

have the same problem using DashboardLayout

TypeError: Cannot read properties of null (reading 'useSyncExternalStore')
    at exports.useSyncExternalStore (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-5KE5NN7T.js?v=c3c9b094:1174:35)
    at useSsr (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-X4VEM7D7.js?v=c3c9b094:795:17)
    at ThemeSwitcher (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-X4VEM7D7.js?v=c3c9b094:803:17)
    at renderWithHooks (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:11548:26)
    at mountIndeterminateComponent (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:14926:21)
    at beginWork (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:15914:22)
    at beginWork$1 (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:19753:22)
    at performUnitOfWork (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:19198:20)
    at workLoopSync (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:19137:13)
    at renderRootSync (http://adm.leprechaun.loc/node_modules/.vite/deps/chunk-PBXWVHXV.js?v=c3c9b094:19116:15)

[bringmetheaugust]

Hmm. I've set the same dependency versions as in the docs example and now it works.

Also I missed "@vitejs/plugin-react" dependency. Maybe it caused the problem. idk

[ebengtso]

To reproduce the issue, you can use the code in the sandbox from the doc, and update the dependencies of react to version 18.3.1, according the below code

I listed Toolpad dependencies and it seems that it requires react 19. Is this on purpose?

├─┬ @toolpad/utils@0.12.0
│ │ └── react@19.0.0

The package.json updating the docs sample to reproduce the issue:
{ "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", "@mui/icons-material": "latest", "@mui/material": "latest", "@toolpad/core": "latest", "@types/invariant": "latest", "@types/react": "18.3.1", "@types/react-dom": "18.3.1", "invariant": "latest", "react": "18.3.1", "react-dom": "18.3.1", "typescript": "latest" }, "description": "https://github.com/mui/toolpad/blob/v0.12.0/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx", "devDependencies": { "react-scripts": "latest" }, "main": "index.tsx", "scripts": { "build": "react-scripts build", "eject": "react-scripts eject", "start": "react-scripts start", "test": "react-scripts test" } }

Thanks

[bharatkashyap]

To reproduce the issue, you can use the code in the sandbox from the doc, and update the dependencies of react to version 18.3.1, according the below code

I listed Toolpad dependencies and it seems that it requires react 19. Is this on purpose?

├─┬ @toolpad/utils@0.12.0 │ │ └── react@19.0.0

The package.json updating the docs sample to reproduce the issue: { "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", "@mui/icons-material": "latest", "@mui/material": "latest", "@toolpad/core": "latest", "@types/invariant": "latest", "@types/react": "18.3.1", "@types/react-dom": "18.3.1", "invariant": "latest", "react": "18.3.1", "react-dom": "18.3.1", "typescript": "latest" }, "description": "https://github.com/mui/toolpad/blob/v0.12.0/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx", "devDependencies": { "react-scripts": "latest" }, "main": "index.tsx", "scripts": { "build": "react-scripts build", "eject": "react-scripts eject", "start": "react-scripts start", "test": "react-scripts test" } }

Thanks

Thanks! This isn't on purpose, it's an issue that's fixed https://github.com/mui/toolpad/pull/4605/files and will be in the next release