React and MUI code

This is the code for my react component , when I use this in my App.js it gives me an error as

dispatcher is null
useContext@http://localhost:3000/static/js/bundle.js:52043:7
useTheme@http://localhost:3000/static/js/bundle.js:47558:59
useTheme@http://localhost:3000/static/js/bundle.js:47468:77
useThemeProps@http://localhost:3000/static/js/bundle.js:47523:68
import React from 'react';
import { Container, Grid, Typography } from '@mui/material';

const HeroSection = () => {
  return (
    <Container maxWidth="lg">
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <img src="/path/to/your/image.jpg" alt="Hero" style={{ width: '100%', height: 'auto' }} />
        </Grid>
        <Grid item xs={12} sm={6}>
          <Typography variant="h4" component="h1" gutterBottom>
            Welcome to Microverse
          </Typography>
          <Typography variant="body1" paragraph>
            Microverse is a leading platform for microbiology enthusiasts, researchers, and professionals. We provide a
            comprehensive range of resources, tools, and community support to foster collaboration and advancements in
            the field of microbiology.
          </Typography>
          <Typography variant="body1" paragraph>
            Whether you are a student, a scientist, or simply passionate about microbes, Microverse is your go-to source
            for the latest research, news, and educational content. Join our community today and explore the wonders of
            the microscopic world!
          </Typography>
          
        </Grid>
      </Grid>
    </Container>
  );
};

export default HeroSection;

Can anyone please help me to resolve this error , as I have to submit my assignments.
Thank you in advance .

I doubt the error is from the component code you have posted. Post a repo with all your code.

Are you using the theming MUI provides?

1 Like

I am not using theming . I don’t have repo for this yet , as this is the only code I have written and encountered error.

We can’t help if you do not post all the code and it can’t possibly be the only code as the app wouldn’t render if it was. We can’t see if you installed all the dependencies correctly and we can’t see how the component is used.

There is nothing in the code you posted that will throw that error on its own. It works perfectly fine when I run it.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.