[SOLVED] Rollup watch/build lags behind one change


This Content is from Stack Overflow. Question asked by Jordy van der Tang

I have a simple react component library (in typescrpt) that I am using in a monorepo through Lerna. However I tested it and this issue occurs both when working directly in the package and when running/watching for changes in the package through Lerna.

I am constantly watching for changes in the library with ‘rollup -c -w’.
This works okay except for the fact that changes in the component library lag behind one “save”.
If I add or change a piece of code and save the file, I see in the console that rollup has detected changes. However these are not yet visible/built into the build/dist folder until I save the file again.

This makes working with this configuration in real time a bit unreliable, I tried looking at the rollup watch settings but could not find anything that would resolve this issue.
Is there a library other than rollup more suited for this or am I missing something about the watching/building process of rollup that causes this delay?


    input: "src/index.ts",
    output: [
            file: packageJson.main,
            format: "cjs",
            sourcemap: true,
            file: packageJson.module,
            format: "esm",
            sourcemap: true,
    plugins: [
        typescript({ tsconfig: "./tsconfig.json" }),
    external: ["react", "react-dom"]
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],


  "compilerOptions": {
    // Default
    "target": "es5", 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true, 
    "skipLibCheck": true,

    // Added
    "jsx": "react", 
    "module": "ESNext",  
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true,

In case it looks familiar, this is based on alex eagleson’s guide for setting up a react component library but I am trying to apply/extend the concepts to realtime updating/building within a monorepo


I had been trying to place the "watch" options in the wrong location and did not notice the warning in the command line.


        watch: {
            buildDelay: 500,

in the first step did the trick for me in the end 🙂

This Question was asked in StackOverflow by Jordy van der Tang and Answered by Jordy van der Tang It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?