I have a design system that is built on top of Material-ui version 5. I use rollup as my bundler.
In one of of the custom components, I import an icon from Mui5 import { Search } from "@material-ui/icons"
When I build using rollup I get the following error which I'm unsure how to fix:
!] Error: Could not load E:\project\node_modules\@material-ui\icons\esm\TransitEnterexitSharp.js
(imported by node_modules\@material-ui\icons\esm\index.js): EMFILE: too many open files, open 'E:\project\node_modules\@material-ui\icons\esm\TransitEnterexitSharp.js'
What config am I missing from rollup? It has the following config:
export default {
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
babel({
plugins:
[
// comes from https://material-ui.com/guides/minimizing-bundle-size/#option-2
[
'babel-plugin-import',
{
'libraryName': '@material-ui/core',
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'core'
],
[
'babel-plugin-import',
{
'libraryName': '@material-ui/icons',
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'icons'
]
],
exclude: 'node_modules/**',
runtimeHelpers: true
}),
typescript({ useTsconfigDeclarationDir: true }),
svgr(),
image(),
copy({
targets: [
{
src: "package.json",
dest: "dist"
}
]
})
]
};
I have also tried playing with umidbekk/babel-plugin-direct-import but to no avail.
Turns out this was fixed in Rollup v2.53.0 that referenced my exact issue https://github.com/rollup/rollup/pull/4170#issue-684709217