Questions tagged [rollupjs]
Rollup.js is a next-generation JavaScript Transpiler and module bundler
rollupjs
1,218
questions
86
votes
1
answer
18k
views
What is flat bundling and why is Rollup better at this than Webpack?
I have recently been looking into rollup and seeing how it differs from Webpack and other bundlers. One thing I came across was that it is better for libraries because of "flat bundling". ...
- 11.6k
64
votes
12
answers
106k
views
Vite "rollup failed to resolve" build error
Trying to build a simple Vite project that has tailwindcss in it and getting the following error, any ideas?
> [email protected] build
> vite build
vite v2.3.4 building for production...
✓ 1 ...
- 741
51
votes
8
answers
47k
views
Best way to import SVG icons into a Svelte app
I have about 80 custom SVG icons that I'm importing into a Svelte front-end app. Building on https://github.com/sveltejs/template, it's built with Rollup and includes Typescript, Tailwind, and all the ...
- 36.5k
33
votes
3
answers
25k
views
String replacements in index.html in vite
I am trying to inject some strings into the index.html of a Vite app (using vue3 template). In a vue-cli project for example we would have
<link rel="icon" href="<%= BASE_URL %>...
- 1,343
29
votes
9
answers
9k
views
Using Rollup for Angular 2's AoT compiler and importing Moment.js
I'm trying to follow the official AoT guide for Angular 2, and I'm using Moment.js in my application. Moment.js is on my packages.json file, and I'm using version 2.15.0. I've been importing it like ...
- 405
29
votes
3
answers
68k
views
Rollup Error: 'default' is not exported by node_modules/react/index.js
I have a project where I use webpack and want to switch to rollup.js but I have trouble regarding the plugin @rollup/plugin-commonjs.
My rollup.conf.js
import resolve from '@rollup/plugin-node-resolve'...
- 32
28
votes
3
answers
22k
views
Tree shaking create-react-app?
I created my React app with create-react-app and now use TypeScript with create-react-app-typescript.
Everything works ok, but the problem is - especially because I use the good but heavy material-ui ...
- 17.2k
27
votes
2
answers
19k
views
How to prevent tests being bundled by rollup?
I am building a react component package and want to exclude my tests folder from being bundled in my dist file that is built from rollup.
My file structure looks like this after running rollup -c
.
├──...
- 8,932
26
votes
6
answers
53k
views
Building Typescript: [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
I've encountered problem building typescript packages with rollup inside lerna managed monorepo.
Error:
lerna ERR! rollup --config ../../rollup.config.js stderr:
loaded ../../rollup.config.js with ...
- 563
26
votes
1
answer
1k
views
Using jQuery DataTables with Rollup.js
Ok I'm using the tool rollup for the first time and I love how small it is making the code. Tree shaking is great. However, I'm having some trouble getting it to include everything correctly. I tried ...
- 1,366
25
votes
5
answers
43k
views
Error Could not resolve entry module React + Rollup
I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-...
- 7,417
25
votes
2
answers
44k
views
Rollup.js unresolved dependencies
I am trying to incorporate rollup.js into a project. Currently I am getting the warnings provided below in the console (unresolved dependencies) and I am not sure why or how to fix it:
'fs' is ...
- 331
25
votes
1
answer
25k
views
How to embed all dependencies into one fat target bundle with rollup.js?
How do I have to configure rollup.js (=> config file "rollup.config.js") if all dependencies should be embedded into the (fat) result bundle (especially: how to configure the rollup parameters "...
- 441
24
votes
1
answer
13k
views
How to best include assets (images and fonts) referenced in scss files in rollup bundle
I am writing a react component library with typescript, sass and rollup, and I want it to be as standalone as possible.
Does anyone have a suggestion on how to best include assets (images and fonts) ...
- 607
23
votes
3
answers
19k
views
rollup.JS and "'this' keyword is equivalent to 'undefined'
I'm trying to bundle Angular2 modules using Rollup.js.
this is my rollup.config.vendor.js file:
import typescript from 'rollup-plugin-typescript2';
import resolve from 'rollup-plugin-node-resolve';
...
- 5,058
22
votes
2
answers
18k
views
How to get rid of the "@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps." warning?
I get this warning every time I build for production. When I build for production I disable source maps in the rollup output config.
output: [{ dir: "...", format: "...", sourcemap:...
- 21.2k
22
votes
1
answer
12k
views
How to make rollup expand `require` statements?
I'm trying to wrap my head around rollup.
I'm using a library that generates a file with this format: IIFE with a require statement. For example
// index.js
(function() {
const myThing = require('...
- 14.1k
21
votes
1
answer
16k
views
WARNING: No name was provided for external module 'X' in output.globals – guessing 'X'
WARNING: No name was provided for external module 'moment' in output.globals – guessing 'momentImported'
WARNING: No name was provided for external module 'odata-parser' in output.globals – guessing '...
- 1,536
20
votes
3
answers
22k
views
Does rollup bundle node_modules into bundle.js?
I am testdriving rollupjs to package a node app into a bundle.js and am confused.
Does rollup support bundling a full node app (including node_modules), or just the js files that are part of your ...
- 3,664
17
votes
1
answer
32k
views
Vite - How do I use a wildcard in Rollupjs build.rollupOptions.external?
I'm using Vite to build a library and I get the following error when building the library:
Rollup failed to resolve import "node:path"
By adding the failed import to the Rollup options I'm ...
- 629
17
votes
3
answers
26k
views
How do I export Typescript interfaces from a node module?
Figured it out!
Initially, I was trying to import my module like this:
const qml = require('quill-marking-logic')
const { checkSentenceCombining, checkSentenceFragment, checkDiagnosticQuestion, ...
- 171
17
votes
1
answer
7k
views
Vite production build errors: `...is not a constructor' for node_modules
I'm trying to do a build for a simple Vue-based project with Vite, but I am running into an error when actually processing the build.
My vite.config.js file:
import { defineConfig } from 'vite'
import ...
- 173
17
votes
2
answers
4k
views
Is singleton guaranteed to be preserved during webpack or rollup module bundling process?
Understanding the fact that singleton creates a shared global state, there will be situations where I might want singleton such as redux store/state object.
If I am using ES modules, I can use the ...
- 20k
16
votes
5
answers
27k
views
Polyfill node os module with vite/rollup.js
I'm working on a Vite project which uses the opensea-js package. This package depends on xhr2-cookies. which imports os, http, https and some other internal node modules.
I'm getting this error when ...
- 2,783
16
votes
3
answers
22k
views
Proper way to chain PostCSS and SASS in rollup
I'm trying to set up rollup to use both SCSS stylesheets and the Lost grid system, which needs to be parsed through PostCSS. I've verified that the SCSS is being parsed correctly, but the PostCSS ...
- 6,257
15
votes
1
answer
16k
views
Rollup with gulp and typescript outputs Cannot find module 'tslib/tslib.es6.js'
I followed the typescript gulp in the doc :https://rollupjs.org/guide/en#gulp
here is my gulp file :
const gulp = require("gulp");
const rollup = require("rollup");
const rollupTypescript = require("...
- 857
15
votes
3
answers
17k
views
How to include HTML partials using Vite?
Is it possible to include snippets of shared HTML using Vite (vanilla)? I'm looking for a way to have the HTML prerendered without injecting via JS.
Something like:
<html>
<head>
{ ...
- 2,702
15
votes
1
answer
30k
views
Rollup: globals & external
I'm trying to rollup my completely es6 module repo which has both local imports/export for the projects, and imports to dependencies that are also either scripts or modules.
I'm also trying to have a ...
- 3,882
15
votes
2
answers
12k
views
Absolute imports with rollup
I'm trying to get imports like
import { startup } from "applicationRoot/renderUI";
to work, from anywhere in my application. I thought the rollup-plugin-alias would be a good fit for this. I ...
- 82.9k
15
votes
2
answers
12k
views
is it possible to use rollup for processing just css?
I know that Rollup is used to bundle .js files. But is it possible to use it just to process css? (css, scss, less, etc).
What i mean is if i had for example in my src folder (the entry folder) a file ...
15
votes
1
answer
8k
views
Library mode in vitejs: How should I manage external dependencies?
Let's say I'm building a library with a few dependencies: react, moment, lodash, and uuid, and I want to distribute this in both ES and UMD format.
I'm also wary of the final bundle size of the user's ...
- 9,550
15
votes
1
answer
1k
views
Can I generate component level css files using RollupJs for my component library?
I'm running into some issues when trying to create a component library with RollupJS.
I'm building a react component library to be used inside other projects. The library uses css-modules for the ...
- 161
14
votes
2
answers
17k
views
How to bundle react app with rollup
I am looking for help with rollup config to build simplest react app.
Currently my bundled js file doesn't really bundle any dependency and looks pretty bare bone.
Repo to repro
rollup config file
...
- 1,164
14
votes
2
answers
1k
views
How to deal with side effects in tree shaking code?
I've been trying to learn how to write code that is tree shaking friendly, but have run into a problem with unavoidable side effects that I'm not sure how to deal with.
In one of my modules, I access ...
- 5,813
14
votes
1
answer
7k
views
Vite library mode vs rollup
Vite has revolutionised web development for frontend js/ts apps. As it is based on rollup and supports library mode, I wonder if there is still any advantage building js libraries directly with ...
- 14.9k
13
votes
4
answers
21k
views
How to pass env variable to rollup.config.js via npm cli?
I have a scripts folder in which many individual scripts inside seperate folder, I would like to build each separately via passing the script name as parameter.
I have set up rollup in package.json ...
- 1,471
13
votes
4
answers
7k
views
Output Single HTML File from Svelte Project
I can't find any example anywhere online that shows how to (or if we can) output a single HTML file from a Svelte project using Rollup (not Webpack), containing all CSS and JS injected inline (and not ...
- 3,587
13
votes
2
answers
2k
views
Inject per-component style tags dynamically with Rollup and scss
I am building a React component library whose source code takes this general structure:
- src
- common.scss (contains things like re-usable css variables)
- components
- button
- index....
- 24.8k
13
votes
0
answers
872
views
Rollup.js is not bundling my React Component Library fonts
Everything works just fine when I view my React component library with Storybook. When I publish the library to the NPM registry, I install it into a dummy React app and everything works as expected ...
- 131
12
votes
2
answers
29k
views
Can I have multiple entry points using Rollup with Gulp?
I have a gulpfile.js that uses Rollup to build two distinct JS files (front-end and admin). The rollup.config.js method allows multiple entry points and bundles to be specified, but to achieve this ...
- 740
12
votes
1
answer
23k
views
what are .esm.js files and whats with the format: 'es' in rollup.js?
I was just going through this library HERE (glide.js) , as i was checking the package.json file i see the following command under the key scripts:
"build:esm": "rollup --config build/esm.js &&...
- 10.1k
12
votes
1
answer
5k
views
importing d3.event into a custom build using rollup
I've got a file d3.custom.build.js like this (simplified):
import { range } from 'd3-array';
import { select, selectAll, event } from 'd3-selection';
import { transition } from 'd3-transition';
...
- 11.4k
12
votes
2
answers
3k
views
React Component Library - Is a bundler needed?
Is a bundler such as rollup needed when creating a react component library?
I.e. if all I have is a simple project with Buttons/Checkboxes etc. as typescript files which are then published on npm, ...
- 1,521
12
votes
1
answer
10k
views
Rollup & React- How to separate component bundles?
I currently am trying to build a UI Library for React and I am having a little bit of trouble. Currently I am using typescript and rollup, and I am able to bundle a single index.js and I am able to ...
- 228
12
votes
2
answers
5k
views
Trying to make Cypress, TypeScript and IstanbulJS work together
I am trying to generate code coverage reports with IstanbulJS for my code written in TypeScript and tested with Cypress. But things get reported out of place:
I created a git repository MCVE ...
- 4,236
12
votes
2
answers
4k
views
Is bundle necessary in a pure-backend NodeJS app?
I'm quite new in this overwhelmingly huge world of js-stack-tools and recently I've been following some tutorials about bundlers, which seem to include almost always the frontend facet.
But in a ...
- 511
12
votes
3
answers
24k
views
How to exclude JS script from the bundle when building app with vite?
Due to another issue, I have to import a JS dependency statically in HTML in my vue3 application.
/index.html
<head>
<!-- ... -->
<script type="module" src="...
- 3,022
12
votes
1
answer
798
views
Is it possible to output simplified Typescript types in the compiled distribution of a Node module
I am trying to create more simplified output in the *.d.ts typescript files which are included with the bundled version of my modules code. These files are generated through a chain involving the ...
- 385
11
votes
4
answers
13k
views
Bundling typescript with RollUp - Couldn't process compiler options
I'm trying to bundle my typescript files RollUp (https://rollupjs.org/)
I used this configuration files:
rollup.config.js:
import alias from 'rollup-plugin-alias';
import resolve from 'rollup-...
- 5,058
11
votes
1
answer
7k
views
How to replace url(...) in rollup'd CSS with data URI?
Using rollup and the postcss plugin, I am able to inject CSS into my bundle. However, my CSS references some image files e.g. background-image: url(./images/my-image.svg);.
How can I configure ...
- 27.3k