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
Related
My Rollup Config worked in Rollup version 2. I try to migrate the rollup package to Version 3.15.0.
Rollup claims that i need the output.dir option instead of using output.file. How can i achieve the same behaviour with using the output.dir option.
Problems with rollupjs configuration
this post doesnt really help me.
rollup.config.js
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from '#rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
const packageJson = require('./package.json');
export default [
{
external: ['react', 'react-dom'],
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
},
{
external: ['react', 'react-dom'],
input: 'dist/esm/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
plugins: [dts()],
},
];
I tried to split the output object:
{
input: 'src/index.ts',
output:
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
},
{
input: 'src/index.ts',
output:
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
}
Since the "inlineDynamicsInports" is deprecated this is not an option
I am trying to build a library of components in React, and I am using Rollup to bundle things up. It is the first time that I am using it and I have watched a couple of tutorials and followed their setup (like this).
Here is my rollup.config.js file:
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main, //CommonJS
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module, //ES6
format: "esm",
sourcemap: true,
}
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
]
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
}
];
Now, when I run rollup, I am getting the error below. I have tried changing the file extension or use the flag as suggested, but the solutions are not working.
Thoughts?
You can try the following steps:
Add the line "type": "module" to your package.json file
Add this line import packageJson from './package.json' assert { type: 'json' }; to your rollup.config.js file
I hope it will be useful
I am using rollup for configuring my React build. In one of the components, I am lazyloading svg file and integrating it to the component JSX using the svgr plugin. I am facing an issue as my svg file is currently inside the same component where it is getting consumed. After build, its SVG path is changing but not changing at the place where it is imported into the component.
My component file:
ImportedIconRef.current = await import(`./svg/${icon}.svg`).then((h) => {
return h.default;
});
Code folder:
Src
|- components
|- Icon
|- svg
|- index.tsx
Build Folder:
Build
|- Assets
|-svg
|- index.js
After Build I am getting an error for unable to find svg on path './svg'
My rollup config:
export default {
input: process.env.STORYBOOKMODE === 'public' ? 'src/publicIndex.ts' : 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
globals: {
react: 'React',
'react-dom': 'ReactDOM'
},
exports: 'named'
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
globals: {
react: 'React',
'react-dom': 'ReactDOM'
},
exports: 'named'
}
],
external: ['react', 'react-dom', 'react-is'],
plugins: [
resolve(),
image({
include: /\.(gif)$/
}),
typescript({
useTsconfigDeclarationDir: true
}),
postcss({
extract: 'main.css',
minimize: 'main.css'
}),
svgr({
svgoConfig: {
plugins: [{ removeTitle: false }, { removeViewBox: false }]
}
}),
copy({
targets: [
{
src: 'src/components/Icon/svg',
dest: 'build/assets'
}
]
})
]
}
I am trying to compile a react project into a single file so that it can be included inside a quite old jsp application. I am using rollup for that.
It just shows a blank page in IE11, without any console error. I have tried multiple ways/configurations from last 3-4 days with no success.
This is my rollup.config.js:
export default {
input: 'src/index.js',
output: {
file: '../compiled/index.js',
format: 'iife',
strict: false,
name: 'window',
intro: 'var global = typeof self !== undefined ? self : this;',
},
plugins: [
resolve({
browser: true
}),
replace({
'process.env.NODE_ENV': JSON.stringify( 'production' )
}),
commonjs({
include: /node_modules/,
}),
babel({
exclude: "node_modules/**", // only transpile our source code
presets: [
[
"#babel/preset-env",
{
targets: {
browsers: "> 0.5%, ie >= 11"
},
modules: false,
spec: true,
useBuiltIns: "usage",
forceAllTransforms: true,
corejs: {
version: 3,
proposals: false
}
}
],
"#babel/preset-react"
]
})
]
};
In index.js of react app, I do include:
import "core-js/stable";
import 'regenerator-runtime/runtime';
This setup do generates a single file as expected. It runs fine in other browsers except IE.
I took some ideas from this Stack Overflow question.
Any clues, suggestions or ideas, all welcome. If any more details needed, please let me know.
Thanks!
I am using Rollup to put together a shared library of form components which uses Formik as the base layer. I'm currently getting the following compile error for 'scheduler' which is used under the hood by Formik.
I've tried installing it manually as a separate npm dependency, but still get the following error.
[!] Error: 'unstable_runWithPriority' is not exported by node_modules/formik/node_modules/scheduler/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/formik/dist/formik.esm.js (9:9)
7: import toPath from 'lodash-es/toPath';
8: import invariant from 'tiny-warning';
9: import { unstable_runWithPriority, LowPriority } from 'scheduler';
Following the Rollup Docs: I tried using the named Exports part of the rollup.config.js e.g.:
plugins: [
peerDepsExternal(),
postcss({ extract: true, plugins: [autoprefixer] }),
json({ include: 'node_modules/**' }),
babel({ exclude: 'node_modules/**', presets: ['#babel/env', '#babel/preset-react'] }),
localResolve(),
resolve({dedupe: [ 'react', 'react-dom' ]}),
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
'node_modules/formik/node_modules/scheduler/index.js': ['unstable_runWithPriority'],
'scheduler': ['unstable_runWithPriority'],
'node_modules/scheduler': ['unstable_runWithPriority'],
'./node_modules/scheduler': ['unstable_runWithPriority'],
'../node_modules/formik/node_modules/scheduler/index.js': ['unstable_runWithPriority']
}
}),
globals(),
externals(),
builtins(),
filesize()
]
As you can see I've tried a few destinations / paths for good measure. Can anyone point me in the right direction as to how to get this compiling again? Or how to properly define my named export? I read a few issues around the web that suggested that the order of the plugins array could affect things, but I swapped them about a bit and I'm still at a loss.
You are probably thinking no one on planet earth will ever have the same obscure error. You would be wrong. Found the solution. (It was related to order on the plugins)
plugins: [
globals(),
builtins(),
externals(),
babel({ exclude: 'node_modules/**', presets: ['#babel/env', '#babel/preset-react'] }),
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
'node_modules/formik/node_modules/scheduler/index.js' : ['unstable_runWithPriority'],
}
}),
peerDepsExternal(),
postcss({ extract: true, plugins: [autoprefixer] }),
json({ include: 'node_modules/**' }),
localResolve(),
resolve({dedupe: [ 'react', 'react-dom' ]}),
filesize()
]
this order of plugins worked for me to solve the issue.
plugins: [
babel({
exclude: 'node_modules/**',
presets: ['#babel/env', '#babel/preset-react'],
}),
typescript({ useTsconfigDeclarationDir: true }),
commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
'node_modules/formik/node_modules/scheduler/index.js': [
'unstable_runWithPriority',
],
},
}),
peerDepsExternal(),
scss(),
json({
compact: true,
}),
resolve(),
],
Use this syntax:
namedExports: {
'scheduler': ['unstable_runWithPriority', 'unstable_LowPriority']
}