unhandledRejection Error: Cannot read properties of null (reading 'useContext')

[jy95]

Search keywords

unhandledRejection Error: Cannot read properties of null (reading 'useContext')

Latest version

• I have tested the latest version

Steps to reproduce

Steps:

1. Git clone https://github.com/jy95/jy95.github.io
2. Select Git branch pigment-CSS
3. npm run build

Current behavior

unhandledRejection Error: Cannot read properties of null (reading 'useContext') in/vercel/path0/src/components/Menu/Header.tsx
    at Module.evaluate (/vercel/path0/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
    at evaluate (/vercel/path0/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
    at BaseAction.evalFile (/vercel/path0/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
    at evalFile.next (<anonymous>)
    at <unknown> (/vercel/path0/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78)
    at EventEmitter.action (/vercel/path0/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
    at BaseAction.emitAction (/vercel/path0/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
    at nextFn (/vercel/path0/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
    at processNext (/vercel/path0/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
    at Object.next (/vercel/path0/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)

Expected behavior

Should work

Context

Following the guide https://mui.com/material-ui/migration/migrating-to-pigment-css/ .
Current MR where I tested it : jy95/jy95.github.io#1050

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.86
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react:  11.13.5 
    @emotion/styled:  11.13.5 
    @mui/core-downloads-tracker:  6.1.9 
    @mui/icons-material: ^6.1.9 => 6.1.9 
    @mui/material: ^6.1.9 => 6.1.9 
    @mui/material-pigment-css: ^6.1.9 => 6.1.9
    @mui/private-theming:  6.1.9
    @mui/styled-engine:  6.1.9
    @mui/system:  6.1.9
    @mui/types:  7.2.19
    @mui/utils:  6.1.9
    @mui/x-charts: ^8.0.0-alpha.1 => 8.0.0-alpha.1
    @mui/x-charts-vendor:  8.0.0-alpha.1
    @mui/x-data-grid: ^8.0.0-alpha.1 => 8.0.0-alpha.1
    @mui/x-internals:  8.0.0-alpha.1
    @pigment-css/nextjs-plugin: ^0.0.28 => 0.0.28
    @pigment-css/react: ^0.0.27 => 0.0.27
    @pigment-css/unplugin:  0.0.28
    react: rc => 18.3.1
    react-dom: rc => 18.3.1
    types-react:  19.0.0-rc.1
    typescript: 5.7.2 => 5.7.2

[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

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

[jy95]

Used @toolpad/core instead of relying on old implementation of Drawer