reactjs - MuiBreadcrumbs and Vite Warning: React.createElement: type is invalid -- expected a string a classfunction - Stack Ove

I have this very simple code:

import { Breadcrumbs, Typography } from "@mui/material";
import { Box } from '@mui/material';
import { useTheme } from '@mui/system';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import React from 'react';
import BreadcrumbsMenu from './components/BreadcrumbsMenu/BreadCrumbsMenu';

function App() {
  const theme = useTheme();

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <>
        <Box
          sx={{
            background: theme?.palette?.grayscale?.light,
            color: theme?.palette?.grayscale?.dark,
            minHeight: '100vh',
            display: 'flex',
            flexFlow: 'column',
          }}
        >
          <Box
            sx={{
              paddingTop: '20px',
              paddingLeft: '30px',
            }}
          >
            <BreadcrumbsMenu />
          </Box>
        </Box>
      </>
    </LocalizationProvider>
  );
}

export default App;

and

const BreadcrumbsMenu = () => {
  return (
      <Breadcrumbs>
        <Typography>Test</Typography>
      </Breadcrumbs>
  );
};

export default BreadcrumbsMenu;

Although this renders just fine, I get this warning in the console:

hook.js:608  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at MuiBreadcrumbs.tsx:8.

Can't really find any useful information on this.

Relevant versions:

    "@mui/icons-material": "^5.15.14",
    "@mui/material": "^5.15.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

    "vite": "^6.0.3",

vite conf:

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: "build",
  },
  resolve: {
    mainFields: ["browser"],
  }
});

This problem only happens if I use vite. With CRE I don't see this warning.

I have this very simple code:

import { Breadcrumbs, Typography } from "@mui/material";
import { Box } from '@mui/material';
import { useTheme } from '@mui/system';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import React from 'react';
import BreadcrumbsMenu from './components/BreadcrumbsMenu/BreadCrumbsMenu';

function App() {
  const theme = useTheme();

  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <>
        <Box
          sx={{
            background: theme?.palette?.grayscale?.light,
            color: theme?.palette?.grayscale?.dark,
            minHeight: '100vh',
            display: 'flex',
            flexFlow: 'column',
          }}
        >
          <Box
            sx={{
              paddingTop: '20px',
              paddingLeft: '30px',
            }}
          >
            <BreadcrumbsMenu />
          </Box>
        </Box>
      </>
    </LocalizationProvider>
  );
}

export default App;

and

const BreadcrumbsMenu = () => {
  return (
      <Breadcrumbs>
        <Typography>Test</Typography>
      </Breadcrumbs>
  );
};

export default BreadcrumbsMenu;

Although this renders just fine, I get this warning in the console:

hook.js:608  Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at MuiBreadcrumbs.tsx:8.

Can't really find any useful information on this.

Relevant versions:

    "@mui/icons-material": "^5.15.14",
    "@mui/material": "^5.15.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

    "vite": "^6.0.3",

vite conf:

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    port: 3000,
  },
  build: {
    outDir: "build",
  },
  resolve: {
    mainFields: ["browser"],
  }
});

This problem only happens if I use vite. With CRE I don't see this warning.

• reactjs
• material-ui
• vite

Share Improve this question Follow asked Jan 2 at 12:55 ForestGForestG 18.2k1515 gold badges6464 silver badges9393 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The Solution was to remove

  resolve: {
    mainFields: ["browser"],
  }

The resolve.mainFields configuration in Vite specifies the order in which Vite resolves entry points for modules when they are imported. This setting is critical in determining which version of a package (e.g., CommonJS, ESM, or browser-specific builds) gets used during the build process.

Using this probably caused an older, not-ESM compatible version to load off the library.