skip to Main Content

I’m building a react application with Rollup.js and trying to use live reload for better DX.
I install all packages and everything looks fine on the first run.

When I try to update my source code, the bundle is rebuilt & the page is refreshed but the changes do not appear in the compiled JS. If I end the process and restart again, the changes appeared.

rollup.config.ts attached below:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import replace from '@rollup/plugin-replace';
import url from './renderer/rollupImageAssetsUrl';
import rollupUrl from '@rollup/plugin-url';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import svgr from '@svgr/rollup';
import type { RollupOptions } from 'rollup'
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

const devConfig : RollupOptions = {
  input: './template/index.tsx',
  output: {
    file: './template/build/index.js',
    format: 'iife'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' ),
      CLASS_TYPE : process.env.CLASS_TYPE ? JSON.stringify(process.env.CLASS_TYPE) : JSON.stringify(`oocss`)
    }),
    resolve({
      browser: true,
      dedupe: ['react', 'react-dom'],
    }),
    typescript({
      tsconfig: './renderer/tsconfig.json',
      declaration: false,
      paths : {
        "component-library/style-library" : ["./../src/index.ts"]
      }
    }),
    commonjs(),
    url({
      fileName: 'images/[name][extname]',
      exclude: ['**/src/Icons/**/**.svg'],
      limit: 0,
      preserveImports: true
    }),
    rollupUrl({
      include: ['**/src/Icons/**/**.svg']
    }),
    svgr({
      icon: true,
      replaceAttrValues : {
        "#000" : "currentColor",
        "black" : "currentColor",
        "#000000" : "currentColor"
      },
      svgProps: {
        'pointerEvents' : 'none',
      }
    }),
    serve({
      contentBase: './template',
      host: '0.0.0.0',
      port: '3002',
    }),
    livereload({
      port: 3003,
      delay: 200
    }),
  ],
  watch: {
    buildDelay: 500,
    clearScreen: true
  }
}

export default devConfig;

Attached with my Docker Setting:

version: '3.9'
services:
  builder:
    container_name: style_library_package_builder_dev
    build:
      context: .
      dockerfile: docker_images/builder/Dockerfile
    image: style-library-package-builder:v0.2.0
    ports:
      - "3002:3002"
      - "3003:3003"
    environment:
      - "TZ=Asia/Tokyo"
      - "CHOKIDAR_USEPOLLING=true"
      - "WATCHPACK_POLLING=true"
    volumes:
      - ./app/.storybook:/var/app/builder/.storybook
      - ./app/renderer:/var/app/builder/renderer
      - ./app/utils:/var/app/builder/utils
      - ./app/template:/var/app/builder/template
      - ./app/package.json:/var/app/builder/package.json
      - ./app/rollup.config.ts:/var/app/builder/rollup.config.ts
      - ./app/rollup.config.dev.ts:/var/app/builder/rollup.config.dev.ts
      - ./app/tsconfig.json:/var/app/builder/tsconfig.json
      - ./app/webpack.config.style.ts:/var/app/builder/webpack.config.style.ts
      - ./app/yarn.lock:/var/app/builder/yarn.lock
      - ./app/.babelrc.json:/var/app/builder/.babelrc.json
      - ./component-library/style-library/builder/src:/var/app/builder/src
      - ./component-library/style-library/builder/assets:/var/app/builder/assets
      - ./component-library/style-library/builder/stories:/var/app/builder/stories
      - ./component-library/style-library/builder/config:/var/app/builder/config
      - ./component-library/style-library/lib:/var/app/lib
      - ./component-library/style-library/package.json:/var/app/package.json
      - ./component-library/package.json:/var/package.json
      - ./component-library/docs:/var/docs
      - /var/app/builder/node_modules
    tty: true
    privileged: true
    secrets:
      - host_ssh_key
secrets:
  host_ssh_key:
    file: ${KEY}

I’m running rollup.js in a Docker Container (w/ image node:18-alpine3.15).
Is there any causes that you can think of about this behavior?
Any help are appreciated.

Tried CHOKIDAR_USEPOLLING=true and rollup.watch.chokidar.usePolling = true but no luck

Edit :
I’ve tried to edit the images it seems that the update in images reflect in watch mode.
But when I update the Typescripts file, still no luck occur:(
New bundle is generated but the changes are not included.
Will there be issue in the @rollup/typescript plugin with watch mode?

2

Answers


  1. Chosen as BEST ANSWER

    After one day of trying, I finally found out that there is a problem with @rollup/plugin-typescript(v11.1.1) when using watch mode of Rollup.JS.
    I've modified my rollup.config.ts and changed my Typescript transpiler from @rollup/plugin-typescript to @rollup/plugin-babel, everything works perfectly.

    Attached with my current settings for anyone come to this problem:

    import resolve from '@rollup/plugin-node-resolve';
    import commonjs from '@rollup/plugin-commonjs';
    import typescript from '@rollup/plugin-typescript';
    import replace from '@rollup/plugin-replace';
    import url from './renderer/rollupImageAssetsUrl';
    import rollupUrl from '@rollup/plugin-url';
    import svgr from '@svgr/rollup';
    import type { RollupOptions } from 'rollup'
    import serve from 'rollup-plugin-serve';
    import livereload from 'rollup-plugin-livereload';
    import html from '@rollup/plugin-html';
    import { babel } from '@rollup/plugin-babel';
    
    const devConfig : RollupOptions = {
      cache: false,
      input: './template/index.tsx',
      output: {
        file: './build/index.js',
        format: 'iife'
      },
      plugins: [
        replace({
          preventAssignment: true,
          'process.env.NODE_ENV': JSON.stringify( 'production' ),
          CLASS_TYPE : process.env.CLASS_TYPE ? JSON.stringify(process.env.CLASS_TYPE) : JSON.stringify(`oocss`)
        }),
        resolve({
          browser: true,
          dedupe: ['react', 'react-dom'],
        }),
        typescript({
          cacheDir: './build/cache',
          tsconfig: './renderer/tsconfig.json',
          declaration : true,
          outDir : './build/types',
          emitDeclarationOnly: true,
          noForceEmit: true,
          paths : {
            "component-library/style-library" : ["./../src/index.ts"]
          }
        }),
        babel({
          exclude: "**/node_modules/**",
          presets: ["@babel/preset-env","@babel/preset-react","@babel/preset-typescript"],
          extensions: [".js", ".jsx", ".ts", ".tsx"],
        }),
        commonjs(),
        url({
          fileName: 'images/[name][extname]',
          exclude: ['**/src/Icons/**/**.svg'],
          limit: 0,
          preserveImports: true
        }),
        rollupUrl({
          include: ['**/src/Icons/**/**.svg']
        }),
        svgr({
          icon: true,
          replaceAttrValues : {
            "#000" : "currentColor",
            "black" : "currentColor",
            "#000000" : "currentColor"
          },
          svgProps: {
            'pointerEvents' : 'none',
          }
        }),
        html(),
        serve({
          contentBase: './build',
          host: '0.0.0.0',
          port: '3002',
        }),
        livereload({
          port: 3003,
          delay: 500
        })
      ],
      watch: {
        chokidar: {
          usePolling: true
        },
        buildDelay: 500
      }
    }
    
    export default () => {
      return devConfig;
    };
    
    
    

    I still left @rollup/plugin-typescript here for type checking and path alias.
    Will report this later in Github issue.


  2. In your docker yml configuration file do you have below setting :

    CHOKIDAR_USEPOLLING=true

    You can refer to the below for more details:
    Live reload React with Docker

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search