¿cómo estás?
Tengo un proyecto React con Webpack y Babel, y estoy tratando de agregar componentes Material UI ( https://mui.com/ ), sin embargo, cuando importo un componente MUI en mi proyecto, aparece el siguiente error:
El tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto.
Una solución que encontré es agregar la importación ".default" , pero no entiendo por qué no puedo importarla de la manera tradicional.
Aquí hay un código de componente de prueba que produce el error:
const React = require("react"); const Button = require("@mui/material/Button"); const Navbar = () => { return <Button variant="contained">Contained</Button>; }; module.exports = Navbar;Y aquí está mi código .babelrc y webpack.config :
{ "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(), ], };¿Alguien sabe lo que estoy haciendo mal? Sé que puede ser una tontería, pero debería poder importar estos componentes de la manera "normal" como se indica en la documentación de MUI, en su lugar, tengo que importarlos usando la forma ".default".
Gracias de antemano, perdón por mi mal inglés.
MUI está diseñado para usarse con módulos EcmaScript (ESM) y no CommonJs (CJS). Si desea utilizar CJS, puede hacerlo, pero como ESM y CJS no son 100 % compatibles, necesitará algunas soluciones.
Para poder importar con sintaxis CJS con
const Button = require("@mui/material/Button");MUI necesitaría exportar (con CJS) con
module.exports = function Button(props) { ... } Pero entonces toda la exportación del módulo Button es el componente Button, y el módulo no pudo exportar nada más. Entonces, en cambio, todo se exporta como exportación con nombre, y el componente en sí se exporta con el nombre default .
La importación de ESM comprende el default y puede usar la forma abreviada, pero CJS solo importa el objeto javascript, que es { default: ... } .
@mui/material/Button/index.js exportaciones:
export { default } from './Button';que se puede importar con CJS con:
const Button = require("@mui/material/Button").default; , oconst Button = require("@mui/material/Button/index").default; @mui/material/index.js exportaciones:
export { default as Button } from './Button'; export * from './Button';que se puede importar con CJS con:
const Button = require("@mui/material/index").Button; (la export * es simplemente "todo desde Button", pero no hay nada más exportado desde Button, excepto, por ejemplo, getButtonUtilityClass de buttonClasses , pero no estamos interesados en eso)