Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    Shanon Jackson
    anyone on atm? gota question about css with rollup can't seem to find any resources online for what in eed
    Shanon Jackson

    Simplest possible problem. Just need to know how to take foo.js

    ... // rest of foo.js

    and run it through rollup and output

    ... // rest of foo.js

    seems like no matter which cominbation of ignorePlugin, css plugins can somehow not achieve something so basic

    They all output single css files and strip all import css statements
    Robert Pearce
    Anybody have a good blog post reference or example for using rollup to bundle a react component that exports two components and does so using CommonJS and ESModules? I'm running into some funny issues with the commonjs and could use an example of how it should be done. Thanks in advance if anybody has anything!
    hello, how to use less?
    Bastian Bavaresco
    I guys
    i have a problem, i'm using Rollup with Lerna and i can't understand why when i build the components, the import '...css' statements disappear.
    Raphaël Droz
    About my previous question, it's still a problem : How to override 3rd-party bundle JS file? My current workaround is:
    • In libraryA, add a "other_field" in the package.json
    • In ApplicationB, use resolve({mainFields:["other_field"]}), It's very cumbersome.

    Hello, I'm trying to use better-sqlite3 in my Svelte app with rollup, however, I see this error:

    Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

    What plugin do I need?

    This message was deleted
    uh it just fixed itself
    Nick Radford
    Is there any mechanism to allow for nested imports in a library bundled with rollup?
    as in import {Button} from 'my-lib/namespace';instead of import {Button} from 'my-lib';
    Shanon Jackson
    @njradford you still here?
    got the fix for you just let me know when you're back
    also need some help of my own if anyone has got some decent experience with babel AST's
    Taylor Zane Glaeser
    Hey y'all. Not sure if this has been asked before, but I wasn't able to find an issue on Github for it. Is there a way to disable rollup appending semicolons to every line on output? I'd rather not have my dist cluttered with semicolons if the input doesn't include them.
    Benny Powers
      watch: {
        include: 'src/**/(*.html|*.js|*.css)',

    Doesn't rebuild when css changes. what gives?

    Goal: saving *.css rebuilds
    non-goal: postcss, less, scss, etc.

    Hello. I need single entry without chunks. At the same time, dynamic modules would be like separate files. Is it possible?

    updater.js and main-core.js - dynamic imported

    async function test(){
      await import('./updater')
      await import('./main-core')
    // more more code ;)

    After the build, additional (unnecessary) appear chunks:


    import resolve from '@rollup/plugin-node-resolve'
    import commonjs from '@rollup/plugin-commonjs'
    import builtins from 'builtin-modules'
    import json from '@rollup/plugin-json';
    export default {
        input: 'src/main.js',
        chunkGroupingSize: 0,
        output: [
                dir: 'dist',
                format: 'cjs',
                chunkFileNames: '[name].js',
                entryFileNames: 'main.js'
        plugins: [
            resolve({ preferBuiltins: true, extensions: ['.js', '.json'] })
        external: [
    Sebbe Selvig
    Hello. I'm trying to inline all js and css, is this possible with Rollup?
    With Webpack I'm able to do:
    plugins: [ new HtmlWebpackPlugin({ template: './src/ui.html', filename: 'ui.html', inlineSource: '.(js)$', chunks: ['ui'], }), new HtmlWebpackInlineSourcePlugin(), ]
    Anything like that for rollup? I have tried to search for plugins, but no luck so far
    Muthu Kumar
    @vladmelnikov I just joined, but you want --preserveModules
    Hello. Is there a way to resolve error: error TS2307: Cannot find module 'window'. when using globals: { window: 'window' }?
    Jonas Ulrich
    Any pointers on how to get a working version of crypto running in the browser, using rollup? Tried all kinds of variations of node-resolve, node-globals, node-builtins, commonjs. Always end up with some remaining errors...
    Jonas Ulrich

    As soon as I use {crypto:true} on node-builtins a shim is loaded that tries to map crypto functions to cryptoBrowserify (at least that's my understanding right now), but cryptoBrowserify is not present in the generated bundle (TypeError: cryptoBrowserify is undefined).

    If I switch to {crypto:false}, cryptoBrowserify is correctly included as a CommonJS module in the bundle, but the shim is not there, resulting in crypto$1 being used in the bundle

    Jonas Ulrich
    Seems to pretty much be the exact same thing described in this issue / comment, too: https://github.com/calvinmetcalf/rollup-plugin-node-builtins/issues/37#issuecomment-361605941
    Anyone know how to bundle licenses into the minified production files?
    Walle Cyril
    Tomas Chmelevskij

    Hello good folks, I'm trying to build bunch of ESM bundles and Rollup works like a charm, the only thing I see is that generated code ends up having tons of anonymous imports like

    import '../../vendor/hash-sum.acf1b3e7.js';
    import '../../vendor/@lingui.824f29a1.js';
    import '../../vendor/messageformat-parser.9ac40565.js';
    import '../../vendor/make-plural.5bdffc0d.js';
    import '../../vendor/marked.3517cd1a.js';
    import '../../vendor/he.27c09500.js';
    import '../../vendor/marksy.8e3e38e3.js';
    import '../../vendor/lodash._reinterpolate.d6edba1a.js';
    import '../../vendor/lodash.templatesettings.43ebedc3.js';
    import '../../vendor/lodash.template.aca86029.js';
    import '../../vendor/lodash.set.d5f45edd.js';
    import '../../vendor/lodash.get.bdaa28ca.js';
    import { S as SubMenu } from '../../vendor/@organism.96cbdd33.js';
    import '../../vendor/redux-form.ada1a921.js';
    import '../../vendor/lodash.63c0ca6e.js';
    import '../../vendor/react-motion.99ba6eb6.js';
    import '../../vendor/performance-now.10d13c8d.js';
    import '../../vendor/raf.2b7aea49.js';
    import '../../vendor/string-convert.92f97490.js';
    import '../../vendor/json2mq.c01f7766.js';
    import { M as Media } from '../../vendor/react-media.ef24965b.js';
    import '../../vendor/dom-helpers.15ca753b.js';
    import '../../vendor/react-transition-group.cf54fd9d.js';
    import { q as querystring } from '../../vendor/index.32317cbf.js';
    import { C as Compliance } from '../../vendor/index.355a33c3.js';
    import '../../vendor/detect-passive-events.5255589a.js';
    import '../../vendor/react-swipeable.02b89c25.js';
    import '../../vendor/chain-function.f99072ed.js';
    import '../../vendor/warning.5afda9b0.js';
    import { i as isEqual } from '../../vendor/lodash.isequal.d5332381.js';
    import { h as hexRgba } from '../../vendor/hex-rgba.e5683980.js';
    import '../../vendor/south-africa-national-id-validation.6e424684.js';
    import '../../vendor/semver.a51e3acf.js';

    Do I really need all of those if they are not actually used in the bundle?

    Peter Todd
    I've just been starting to use rollup and feeling fairly happy with the results. I noticed a bug in the multi-entry plugin (rollup/plugins#95), and that it had already been reported and closed, with a suggestion that the user ask here instead. I already posted in that thread as I'm pretty satisfied that it's a clear bug. However, the thing that's concerning me now is that in the course of investigating this, I ran it on some other code - that I wasn't immediately intending to pass through rollup - and got a lot of breaking changes, most notably a lot of cases where function calls had all of their arguments removed...
    In most / all of these argument-removing cases, the code was JS where the functions are global variables defined in other files that weren't part of the rollup input.
    Peter Todd
    It may be that as long as the rollup input was somewhat clean / side-effect free that this would never happen, but unfortunately that is decidedly not the case with the expletive code in question. My intention was to apply rollup to new parts which should be mostly relatively modular, but it looks like I'll have to be very diligent about making sure there are adequate type declerations around etc. for any interactions with side-effecty & global stuff.
    Peter Todd
    In case anyone is interested: TypeScript with 'declare var' behaves differently to js 'var' in this respect (arguments are preserved).
    Jakob Rosenberg
    Hello all. :) Can anyone tell me how to get the generated filenames from dynamic imports? I'm looking to precache them in a worker.
    hey does anybody have advice on getting rollup to work with a package that's part of a lerna monorepo/yarn workspace? whenever I try to run my yarn build in this specific package I get a Error: Cannot find module 'rollup-plugin-commonjs' error and I'm not sure how to address it
    it seems like it's just looking for node_modules/ inside the package, but it needs to go to the root directory of the mono repo to actually find it
    ......oh because that's just the wrong package name LMAO
    Alex Buznik

    Hey guys!
    I'm using grunt-rollup for our project
    Now I get an unexpected token error, but without any clue of which token at which position
    grunt rollup -v does not help

    Any ideas how I can enable extra tracing or logging?

    Alex Buznik
    nevermind, did run it directly with ./node_modules/.bin/rollup -c rollup.config.js and found my issue
    Tomas Chmelevskij
    @jakobrosenberg have you checked the https://rollupjs.org/guide/en/#writebundle hook?

    I have a simple question, but I can't find the best and most simple solution. My app has a single .css file that I want to be copied to my /dist folder whenever it is changed. The only plugin I am using is @rollup/plugin-typescript, and I don't want to install more unless I have to. rollup-plugin-postcss can do this task, but is total overkill for what I need. @rollup/plugin-url looks promising if I could simply import the css file into my index.ts and have it write it to the destination with the bundle when it changes... but the instructions are complex and there are no clear examples given of how to do anything :(

    Another option is to run a bash script every time rollup finishes compiling, but I don't seen how to do that. Thanks for any input! I am using the command line to run rollup with a rollup.config.js file:

    import typescript from '@rollup/plugin-typescript';
    export default {
      input: 'src/index.ts',
      output: {
        dir: 'dist',
        format: 'esm'
      plugins: [typescript()]
    Walle Cyril
    Aravinda Rathnayake
    Guys, how can we import RollupWatchOptions, watch to project using ES6 syntax?
    Miguel Camba
    I have a unusual question. I've created a babel plugin that does some modification on the code and adds an import { foo, bar } from "my-lib"; in certain modules. Then rollup takes over but for some reason, it thinks that "my-lib" is a global, the generated IIFE in the bundle has a .......})(myLibrary); at the end. Somehow it think that the library is a global in window when it's not, and in fact the some of that library are included in the bundle (the functions that I import from files that I'm not transforming with babel
    that makes me think my plugins are not running in the other I expected them to, but not sure why or how to fix it
    to clarify, there are two problem there. 1) It think that the library is external and tries to pass it in. 2) Seems that the functions used from those transformed files are not picked by the bundling process
    Peter Todd
    @David-Else You should be able to fairly easily watch your css file and copy it when it changes. If you want to integrate that with your rollup configuration, perhaps invoke rollup from the Javascript API https://rollupjs.org/guide/en/#javascript-api and have another separate bit of code that just watches and copies your file (with Node fs module).