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.