I’m using rollup to bundle a ui library (to use it in several main apps).
but in bundled esm file I have these imports, which are not acceptable to webpack in main apps:
import { ArrowDropDownCircleOutlined } from '@mui/icons-material/index';
import '@mui/material/CircularProgress';
import '@mui/icons-material/HighlightOff';
import Autocomplete from '@mui/material/Autocomplete';
import Paper from '@mui/material/Paper';
import { grey } from '@mui/material/colors';
this is my rollup.config:
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import replace from "@rollup/plugin-replace";
import { dts } from "rollup-plugin-dts";
import packageJson from "./package.json";
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
nodeResolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
replace({
"process.env.NODE_ENV": JSON.stringify("production"),
}),
],
external: [...Object.keys(packageJson.peerDependencies), "tss-react/mui", 'tss-react/mui', /@mui/],
},
{
input: "src/index.ts",
output: [{ file: "dist/index.d.ts", format: "es" }],
plugins: [dts],
},
];
this is my webpack config created by create-react-app:
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
},
resolve: {
fullySpecified: false,
}
}
],
}
}
and these are errors I have:
Module not found: Error: Can’t resolve ‘@mui/icons-material/index’ in ‘path-to-base/my-app/node_modules/ui-lib/dist/esm’
Did you mean ‘index.js’?
BREAKING CHANGE: The request ‘@mui/icons-material/index’ failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a ‘.mjs’ file, or a ‘.js’ file where the package.json contains ‘"type": "module"’).
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
I can not find a way to resolve this in webpack config, or in rollup config.
2
Answers
try this config https://webpack.js.org/configuration/module/#resolvefullyspecified.
When enabled, you should provide the file extension when importing a module in .mjs files or any other .js files when their nearest parent package.json file contains a "type" field with a value of "module", otherwise webpack would fail the compiling with a Module not found error.
we had problem in webpack 4, which bundle all icons when you use import style like this
We must rewrite all our imports for mui icons to
But this seem like problem with esm import. I find this solution for esm
Because there was some bug in react scripts. Issue here – https://github.com/facebook/create-react-app/issues/11865