Search code examples
javascriptreactjsmaterial-uijsx

TypeError: Cannot read properties of null (reading 'useContext') - Material UI

I'm using MUI(Material UI) in my project.
Component that I'm trying to use is Button.
Check its official component docs here.
Code in which error is occuring :

import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

export default function IconLabelButtons() {
  return (
    <>
      <Button variant="outlined" startIcon={<ShoppingCartIcon />} sx={{color:'grey'}}>
        Add To Cart
      </Button>
      <Button variant="contained" endIcon={<ShoppingCartIcon />} sx={{ color: 'white', backgroundColor:'grey' }}>
        Add To Cart
      </Button>
    </>
  );
}


Complete error msg :

Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (http://localhost:3001/static/js/bundle.js:77496:25)
    at useDefaultProps (http://localhost:3001/static/js/bundle.js:70496:50)
    at useDefaultProps (http://localhost:3001/static/js/bundle.js:67954:91)
    at SvgIcon (http://localhost:3001/static/js/bundle.js:68093:96)
    at renderWithHooks (http://localhost:3001/static/js/bundle.js:42667:22)
    at updateForwardRef (http://localhost:3001/static/js/bundle.js:45916:24)
    at beginWork (http://localhost:3001/static/js/bundle.js:47977:20)
    at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/bundle.js:32923:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/bundle.js:32967:20)
    at invokeGuardedCallback (http://localhost:3001/static/js/bundle.js:33024:35)

This code is working fine if I remove startIcon & startIcon options from the Button tag.
Working Code:

import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

export default function IconLabelButtons() {
  return (
    <>
      <Button variant="outlined"  sx={{color:'grey'}}>
        Add To Cart
      </Button>
      <Button variant="contained"  sx={{ color: 'white', backgroundColor:'grey' }}>
        Add To Cart
      </Button>
    </>
  );
}

However, I want to use both the options.
I've installed both mui/material & mui/icons-material deps in the project. Still facing aforementioned issue.

Could anyone from the community help me out to fix this.

Solution

  • If you check the link provided for the official docs.
    Its version is 6.1.1.

    So I tried to update versions of both the used deps in the project using following command:
    npm install @mui/material@latest @mui/icons-material@latest.

    enter image description here

    Doing this fixed the error.

    Conclusion: Keep a check on the versions of mui/material & mui/icons-material deps. They should match the docs version that you are referring.