Questions tagged [rollupjs]

Rollup.js stands as a revolutionary tool in the world of JavaScript, acting both as a transpiler and module bundler for modern web development.

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

Error encountered when importing a Material-UI component: Unable to load a module from @babel/runtime

Struggling to compile the index.js file with rollup: import React from "react"; import ReactDOM from "react-dom"; import Grid from "@material-ui/core/Grid"; ReactDOM.render( <React.StrictMode> <Grid conta ...

The npm rollup.js error message reads: "ReferenceError: _default is not defined."

Struggling for hours to find a solution, as my expertise in creating modules is limited. An error message keeps popping up: ReferenceError: _default is not defined tsconfig.json { "compilerOptions": { "target": "es5", ...

The error message "Unable to access 'useContext' property of null" appeared

I am currently in the process of developing a component library using Material UI, TypeScript, and Rollup. The package has been successfully published, but I am encountering an error when trying to import it into a new project: "Uncaught TypeError: C ...

Error: unable to access fsevents module from rollup

While attempting to construct my Angular application on Gitlab CI and install the necessary dependencies using npm ci, I ran into an issue with the error message 'fsevents not accessible from rollup'. Even after trying npm ci --no-optional, the problem p ...

What is the best way to bundle a .js file containing code with the export default syntax?

I have a single .js file with the following code: export default (vueInst, obj, events) => { for (const eventName of events) { ... } } An issue has occurred: Error at Function.missingTransform in /node_modules/buble/dist/buble.cjs.js:376:9 T ...

Is it possible to set up Vite/Rollup in a way that only triggers vue-tsc for dependencies that are utilized by the entrypoints?

Currently, I am in the process of upgrading my Vue 2 project to Vue 3 and have decided to migrate from the Vue CLI to Vite since it is now end of life. The upgrade has resulted in numerous breaking changes, requiring refactoring of most files in the /src f ...

Combining multiple directories into a single output using the rollup command

Alright, let's talk about my directory setup: mods/ -core/ --index.js --scripts/ ---lots of stuff imported by core/index Currently, the typical rollup process works smoothly if you want to create something like mods/core/index.min.js. However, I ha ...

Bundling sub-components using Rollup for NodeJS application packaging

My ES6 library consists of several sub-modules arranged like this: - package.json - lib - my_package - file1.js - file2.js - sub_module1 - file3.js - file4.js Currently, I import modules within my package using file resolution r ...

A step-by-step guide on importing stompjs with rollup

My ng2 app with TypeScript utilizes stompjs successfully, but encounters issues when rollup is implemented. The import statement used is: import {Stomp} from "stompjs" However, upon running rollup, the error "EXCEPTION: Stomp is not defined" is thrown. ...

Troubleshooting the hoist-non-react-statics problem during the rollup.js compilation process

Encountering difficulties while attempting to construct my storybook using rollup.js. Within my react components, I am utilizing @mui/material, and the installation page suggests installing two additional packages called @emotion/react and @emotion/styled. ...

Building an NPM module specifically designed for Ionic app development requires a strategic approach

Currently, I am in the process of creating a library for Ionic 2 that needs to be installed via NPM. However, I am facing some challenges with the traditional installation method. When trying to develop a module, you can usually use the npm link command to ...

Index.js is dynamically importing a .tsx file post-build, with a specific focus on Windows

While working on my project, I decided to customize a module by cloning it and making some changes. After installing the dependencies and building it, I encountered an error when trying to run it. The error message stated: Error: Unable to resolve module ' ...

When combining NextJS, Rollup, and yalc, an error may occur stating "Element type is invalid: expected a string (for built-in components) but got: undefined."

While working on creating a component library for React, I keep encountering the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forg ...

By utilizing custom typeRoots while continuing to export these types alongside the entry point

For my project setup, I employ rollup to bundle an associated index.d.ts (and index.js) for the entrypoint src/index.ts. Within the project structure, there exists a directory named src/types containing multiple .d.ts files. These types are globally acces ...

Rollup faces challenges when trying to bundle source code alongside Bazel and Typescript

I am attempting to create a bundle using rollup, typescript, and bazel environment. I am having trouble importing relative paths. Typescript builds correctly but rollup is unable to bundle the source. WORKSPACE # WORKSPACE workspace( name = "WORK ...

The error "Rollup EMFILE: exceeding file limit with material-ui icons" is appearing due to an

I have implemented a design system based on Material-ui version 5, with rollup as my bundler. Within one of the custom components, I am importing an icon from Mui5 import { Search } from "@material-ui/icons" During the rollup build process, I e ...

Combine Ractive with ractive-load using Rollup to optimize your code

When incorporating ractive and ractive-load into a rollup project, is it preferable to use npm or github for the installation process? To add each one, I currently utilize npm: npm install --save-dev ractivejs/ractive And npm install --save-dev ractive ...

What is the best way to package a MUI theme along with Rollup?

I have been working on extracting our existing react frontend components from the main repository and moving them into a separate repository that I am bundling with rollup. In our previous code, we used makeStyles which I am now transitioning to styled-com ...

What is the process for assigning global or environment variables to my personal npm package or node module within a project?

I created my own npm package for React, which we'll call @group/package. Within this package, I developed exportable hooks. One example is a hook called useFetchWithRefreshToken. This hook always calls the same API_URL, but the specific URL depends on ...

Troubleshooting Bootstrap bug caused by rollupPluginBabelHelpers

I am currently working on a Bootstrap 4 website. I noticed that in Internet Explorer, the modal works fine when opened for the first time, but then displays an error in the console and does not open when trying to do so a second time on the same window. On ...

Create a package themed with Material UI for export

I am attempting to create a new npm package that exports all @material-ui/core components with my own theme. I am currently using TypeScript and Rollup, but encountering difficulties. Here is the code I have: index.ts export { Button } from '@material-ui/ ...