CODEWITHSUNDEEP
reactjstypescriptrollup
Jordy van der Tang
Jordy van der Tang

Reputation: 51

Rollup watch/build lags behind one change

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?

rollup.config.js

{
    input: "src/index.ts",
    output: [
        {
            file: packageJson.main,
            format: "cjs",
            sourcemap: true,
        },
        {
            file: packageJson.module,
            format: "esm",
            sourcemap: true,
        },
    ],
    plugins: [
        resolve(),
        commonjs(),
        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()],
}

tsconfig.json

{
  "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

Upvotes: 0

Views: 826

Answers (1)

Jordy van der Tang
Jordy van der Tang

Reputation: 51

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

Using

        watch: {
            buildDelay: 500,
        },

in the first step did the trick for me in the end :)

Upvotes: 4

Related Questions