Questions tagged [rollup]

Using the ROLLUP operator is an effective way to create reports that include subtotals and totals. This operator produces a result set that closely resembles what the CUBE operator generates, making it a valuable tool for data analysis.

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. The main question arises: What is the purpose of th ...

Combining a component library for RSC (React Server Components) with the Next.js App Router

I am currently developing a library of React components that will be utilized in various Next.js projects. The goal is to follow the RSC approach, where the majority of components are server-side rendered with only certain nodes having the "use client" dir ...

What is the best way to bring in extra files to server.js while working with sapper?

When working on my sapper app, I attempted to import a file into the server.js file using the following code: import sirv from 'sirv'; import polka from 'polka'; import compression from 'compression'; import * as sapper from '@sapper/server'; const { PORT ...

Deciding between bundling a Typescript package and using tsc: When is each approach the best choice

When it comes to publishing a Typescript NPM package (library, not client), I have two main options: 1. Leveraging Typescript's compiler First option is to use the Typescript compiler: tsc and configure a tsconfig.json file with an outDir setting: { ...

Encountering an "Invalid hook call error" while utilizing my custom library with styled-components

I recently developed my own custom UI tool using the styled-components library, integrating typescript and rollup for efficiency. One of the components I created looks like this: import styled from 'styled-components' export const MyUITest2 = styled.div` ...

When utilizing the package, an error occurs stating that Chart__default.default is not a constructor in chart.js

I have been working on a project that involves creating a package with a react chart component using chart.js. Everything runs smoothly when I debug the package in storybook. However, I encountered an error when bundling the package with rollup, referenc ...

Incorporate font assets from the bundled ReactJS library in the npm package for Rollup

I am currently in the process of bundling a reactjs library using rollup to generate an npm package containing all my UI components. However, I have encountered an issue with the font icons. Whenever I attempt to utilize an icon from another react app, I e ...

There seems to be an issue with the hydration process in NextJS when using styled-components with a component

Currently, I am in the process of developing a component library for a brand new nextJS application. This nextJS application utilizes the "app router" feature. Everything functions perfectly when I directly integrate styled-components into the nextJS code ...

Unable to run unit tests on project using my custom React library

If any of you have encountered this issue or know how to solve it, please help me. I created an NPM package that can be found at https://www.npmjs.com/package/@applaudo/react-clapp-ui It installs and runs smoothly in other projects using create react app; ...

Rollup and React are having trouble compiling JSX code

While attempting to incorporate Rollup with React, I've come across an issue when Rollup encounters JSX. Unexpected token... export default () => <p>M... I've created a repository that triggers this error. Most of the documentation and examples ...

The VSCode Extension fails to launch after being packaged

I'm currently working on a straightforward VSCode extension that scans the active open file for any comments containing "//TODO: " and then presents a list of all TODO comments in a webview sidebar tab. While I have a functional prototype that runs smooth ...

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 ...

"Error message pops up indicating the dispatcher is missing while using npm link with a local project

Currently, I am working on a React component library that I want to integrate into a local project for testing purposes. My initial approach was to use npm link to connect the component library with my local project. However, during this process, I encount ...

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

Is it recommended for the main, module, and browser properties in package.json to reference the minified version or the source

When developing a JavaScript library, it is important to consider the structure in which it will be published. This typically includes various bundles such as CJS, ESM, and UMD, each with their own source, minified, and map files. my-package dist ...

Managing dependencies using Rollup and implementing a bundle strategy with Rollup

I am currently developing an NPM package and using rollup for bundling and npm publishing. I am seeking guidance on whether a dependency should be bundled by rollup or not. Below is my detailed analysis: Every dependency used in the 'src' folder should ...

Can Material UI be defined as a peerDependency while maintaining its types as a DevDependency?

Is there a way to set Material UI as a peerDependency while keeping its types as DevDependency? I'm currently working on a component library using React + Typescript, with components based on Material UI and Rollup as the module bundler. For example, I h ...

Is there a point in bundling NPM packages if they are ultimately going to be bundled by the project

I'm in the process of creating a TypeScript package for publication on NPM. My plan is to utilize this package in upcoming web development endeavors, most likely utilizing Vite. As I look ahead to constructing a future website with this module, I am c ...

Embed images within the JavaScript bundle

Here is my scenario: I have developed a components library for React. Within this library, there is a package bundled with Rollup that contains various assets, including a GIF picture used in one of the components. The specific component utilizing this p ...

Having trouble bringing in a linked npm library into the project

Recently, I've been facing an issue with my NPM library 'example-lib' (created with Rollup) and my Vite React-TS project. My goal is to test 'example-lib' within my Vite project by using npm link. Instructions for the library: npm link And here's what I ...

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 ...

Steps to develop a collaborative NPM package

I am currently in the process of developing an NPM package using Typescript that contains solely my type interfaces. At the moment, my project has the following folder structure: project │ index.ts │ └───types │ restaurant.ts │ ...

Unusual class title following npm packaging

Currently, I am working on developing a Vue 3 library with TypeScript. We are using Rollup for bundling the library. Everything works as expected within the library itself. However, after packing and installing it in another application, we noticed that th ...

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 ...

Is it advisable to incorporate node modules into my library bundle?

I am in the process of developing a React component library that is being utilized by various internal NextJs projects. To ensure compatibility with NextJs, the library must be transpiled into CommonJS at some point. However, an issue arises as certain np ...

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. ...

Tips for effectively packaging the React 17 library alongside the latest JSX transformation feature as an ES Module

I am currently in the process of creating a basic library consisting of React components that I intend to publish as an ES Module package for NPM. With the utilization of React 17, I have incorporated the new JSX transform into my code. To generate the ES ...

Encountering an issue with a Node native module not being found while attempting to import

Encountering an issue while working on a Svelte & TypeScript project where importing native Node modules is causing trouble. For instance, when typing: import { createInterface } from "readline"; in a .ts or .svelte file, a warning pops up saying: Plugin ...