Next.js首页引入MUI组件时触发React 'Element type is invalid'错误的问题求助

Hey there, let's break down what's going wrong and fix that error quickly!

The Core Issues #

You're hitting two main problems here:

1. Incorrect import for Typography: You're using a named import ({ Typography }) from @mui/material/Typography, but this module exports Typography as a default export, not a named one. That's why React is seeing undefined when it tries to render the component.
2. Minor component naming & theme setup issues: Your component name starts with a lowercase letter (React prefers uppercase for component names to avoid confusion with native HTML elements), and you created a custom theme but didn't wrap your component in ThemeProvider to apply it.

Corrected Code (Option 1: Named Import from @mui/material) #

This is the cleaner approach for MUI imports:

import { Typography } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';

// Fixed theme config (removed duplicate/unnecessary fontFamily key)
const theme = createTheme({ 
  typography: { fontFamily: 'Arial' } 
});

// Renamed component to uppercase (React best practice)
function Index() {
  return (
    {/* Wrap your component in ThemeProvider to apply the custom theme */}
    <ThemeProvider theme={theme}>
      <Typography variant="body2">Minimum 6 Characters</Typography>
    </ThemeProvider>
  );
};

export default Index;

Corrected Code (Option 2: Default Import from @mui/material/Typography) #

If you prefer importing directly from the component's module:

import Typography from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({ 
  typography: { fontFamily: 'Arial' } 
});

function Index() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="body2">Minimum 6 Characters</Typography>
    </ThemeProvider>
  );
};

export default Index;

Why This Works #

• The import fix ensures React gets a valid component instead of undefined, resolving the "Element type is invalid" error.
• Wrapping with ThemeProvider makes sure your custom font family (Arial) is applied to the Typography component.
• Uppercase component name follows React's conventions and avoids potential edge cases.

内容的提问来源于stack exchange，提问作者william007