I’m currently developing a React component library that’s built with Rollup and released as a private npm package. This library is used across multiple applications.

The issue I’m facing is that during development, I need to make changes to the component library and test those changes in the applications immediately. However, after making changes in the component library, I have to rebuild the entire package and manually reinstall it in the applications, which is time-consuming. I’m looking for a more efficient way to integrate changes in real-time, similar to Hot Module Replacement (HMR), so that whenever I modify the component library, the changes automatically reflect in the application without needing a full rebuild and reinstall.

The issue I’m facing is that during development, after making changes in the component library, I need to rebuild and reinstall the package manually in all the applications, which is time-consuming. I have tried using npm link, but the problem still persists. Even when using --watch, Rollup rebuilds the entire package from scratch, which is not efficient.

I’m looking for a solution to make this process faster, similar to Hot Module Replacement (HMR). Ideally, whenever I modify the component library, the changes should reflect in the application immediately without needing a full rebuild and reinstall.

NOTE: The main stylesheet generated from rollup is also imported by the root layout of my Next.JS application.

I’ve added my current Rollup configuration below:

[
    {
        input: 'src/index.ts',
        treeshake: true,
        external: [...Object.keys(packageJson.peerDependencies || {})],
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: false,
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: false,
            },
        ],
        plugins: [
            del({ targets: 'dist/*' }),
            peerDepsExternal(),
            resolve(),
            commonjs(),
            typescript({
                tsconfig: './tsconfig.json',
                exclude: [
                    // Exclude test files
                    /\.test.((js|jsx|ts|tsx))$/,
                    // Exclude story files
                    /\.stories.((js|jsx|ts|tsx|mdx))$/,
                    // Exclude story folder
                    '**/stories/**',
                ],
            }),
            postcss({
                include: ['./**/*.css'],
            }),
            copy({
                targets: [{ src: 'src/styles/_*.sass', dest: 'dist/sass' }],
            }),
            sass({ output: true, output: 'dist/styles.css', options: { outputStyle: 'compressed' } }),
            preserveDirectives(),
            terser({ compress: { directives: false } }),
        ],
    },
    {
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'esm' }],
        plugins: [dts()],
        external: [/\.(css|less|scss|sass)$/],
    },
]