Material UI - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Question

how are you?

I have a React project with Webpack and Babel, and i'm trying to add Material UI (https://mui.com/) components, however, when i import a MUI component into my project i get the next error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

A workaround i found is to add the ".default" import, but i don't understand why i'm not able to just import it the traditional way.

Here's a test component code that produces the error:

const React = require("react");
const Button = require("@mui/material/Button");

const Navbar = () => {
  return <Button variant="contained">Contained</Button>;
};

module.exports = Navbar;

And here's my .babelrc and webpack.config code:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index.bundle.js",
  },
  devServer: {
    port: 8443,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
    new MiniCssExtractPlugin(),
  ],
};

Does anyone know what i'm doing wrong? I know it might be silly, but i should be able to just import these components the "normal" way as stated in the MUI documentation, instead, i have to import them using the ".default" way.

Thanks in advance, sorry for my bad english.

Answer 1

MUI is designed to be used with EcmaScript modules (ESM) and not CommonJs (CJS). If you do want to use CJS, you can do that, but as ESM and CJS are not 100 % compatible, you will need some workarounds.

To be able to import with CJS syntax with

const Button = require("@mui/material/Button");

MUI would need to export (with CJS) with

module.exports = function Button(props) { ... }

But then the whole export of the Button module is the Button component, and the module could not export anything else. So instead, everything is exported as named export, and the component itself is exported with the name default.

The ESM import understands the default and you can use the short form, but CJS just imports the javascript object, which is { default: ... }.

A

@mui/material/Button/index.js exports:

export { default } from './Button';

which can be imported with CJS with either:

• const Button = require("@mui/material/Button").default;, or
• const Button = require("@mui/material/Button/index").default;

B

@mui/material/index.js exports:

export { default as Button } from './Button';
export * from './Button';

which can be imported with CJS with:

• const Button = require("@mui/material/index").Button;

( the export * is just "everything from Button", but there is nothing else exported from Button, except e.g. getButtonUtilityClass from buttonClasses, but we are not interested in that)