Smart way to recompile create-react-app when a dependency changes

Question

I’m using create-react-app with inside a package (my-package) that i developed. My-package is bundled with webpack.

During heavy duty test loops i often change my-package and i re-install it locally in the react-app with npm i —save ../my-package, unfortunately this operation is slow and does not trigger a recompile action by the react-app when i’m in npm start mode.

It would be nice if i could set webpack —watch in my-package and somehow have the bundle served to the react-app + a recompile trigger.

Is there a way to achieve this? Thanks.

Answer 1

I will split my answer in two parts: how to setup a locally linked package through npm and how to setup create-react-app's Webpack to trigger a recompile.

Setting up a local package

To setup a local package, you have to create a symlink inside your project's node_modules folder pointing to your package. An easy way to do this is with the npm link command. To do this, go into your package folder and run npm link and then go into your project folder and run npm link package-name.

If you did this right, you should be able to check that a symlink was created inside your node_modules folder pointing to your package folder. If it does not work, make sure your package.json file points to the right location for your package. e.g:

    "dependencies": {
      "package-name": "file:../relative/path/to/your/package"
    }

Making create-react-app trigger a rebuild on local package change

If you look into the source of create-react-app, you will notice that the file webpackDevServer.config.js has the following option:

    watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
    }

Where ignoredFiles is an imports a regex that matches node_modules. This means that create-react-app is explicitly ignoring rebuilds on node_modules changes (there is an exception though, that is on new package addition, which is done by using WatchMissingNodeModulesPlugin in webpack.config.dev.js).

The reason for this is that some computers are slowed down when checking the whole node_modules folder for changes. My suggestion is to override the ignoredFiles function, by using a regexp to only exclude your local package. e.g.:

    const ignoredFiles = function (appSrc) {
      return new RegExp(
        `^(?!${escape(
          path.normalize(appSrc + '/').replace(/[\\]+/g, '/')
        )}).+/node_modules/(?!package-name)`,
        'g'
      );
    };

Unfortunatelly you will have to eject from create-react-app or override your webpackDevServer.config.js (by using rewire for example) to be able to apply said changes.