Yalc not working for rapid development

[fddayan]

I have 2 projects and I want to share a library. I'm trying to use yalc to share this library and continuously develop on the share library and push changes to the the projects. One project is using create react app and when I push changes after compiling with yalc push and I restart the create react app the app does not take the lates changes from the library. I can see in node_modules that the code is the latest one, but the app does not reload. After removing the project and install and doing that for a few times it takes the latests changes. I'm wondering if something is being cached.

[wclr]

maybe create react app caches something, I don't know how it works, maybe it checks for lock files for changes. If you use yarn try do yarn upgrade pkg after updating yalc'ed package pkg and see if CRA graps this update.

[mascardoso]

I have the same issue and would like to see this solved. However sounds like a problem within the apps context and not yalc. What worked for me:

In my package: npm run build yalc publish --push --no-scripts

In create react app rm -rf node_modules/.cache/ npm run start

Important note: Consider I've previously already added the package with yalc (yalc add ..)

I've also tested in a nextjs app and I ended up also doing rm -rf .next/

[regalstreak]

Yall need something like this in your webpack/nextjs config. Also don't forget to use next-transpile-modules with nextjs and transpile your node modules

                    /**
                     * Make HMR work in all ./node_modules/@headout/ libraries
                     * Needed after the next.js 12 upgrade along with transpiling the @headout libraries
                     */
                    config.snapshot = {
                        ...(config.snapshot ?? {}),
                        managedPaths: [
                            /^(.+?[\\/]node_modules[\\/])(?!@headout)/,
                        ],
                    };

                    // Replace the '**/node_modules/**' with a regex that excludes node_modules except @headout
                    config.watchOptions = {
                        ...(config.watchOptions ?? {}),
                        ignored: [
                            '**/.git/**',
                            '**/node_modules/!(@headout)**',
                            '**/.next/**',
                        ],
                    };

[Phanabani]

Thanks so much regalstreak for this config, it fixed my problems. For future viewers of this issue, here is my slightly modified solution for using create-react-app and yalc:

1. Install react-app-rewired to modify the webpack config.

   npm install --save-dev react-app-rewired
   # or
   yarn install -D react-app-rewired

2. In your package.json, change the scripts to use react-app-rewired instead of react-scripts.

   "scripts": {
       "build": "react-app-rewired build",
       "eject": "react-app-rewired eject",
       "start": "react-app-rewired start",
       "test": "react-app-rewired test"
   },

3. Create a file in your root dir (next to package.json) named config-overrides.js with the following code (based on regalstreak's answer above). Replace "YOUR-MODULE-NAME-HERE" with the name of your module.

   const moduleName = "YOUR-MODULE-NAME-HERE";
   
   // `node_modules/.cache` makes it difficult to use yalc to update local
   // libraries and use create-react-app's hotloading. This override fixes that
   // issue.
   //
   // Source: https://github.com/wclr/yalc/issues/195
   module.exports = function override(config) {
       const managedPaths = config.snapshot?.managedPaths ?? [];
       managedPaths.push(
           new RegExp(`^(.+?[\\\\/]node_modules[\\\\/])(?!${moduleName})`)
       );
       config.snapshot = { ...(config.snapshot ?? {}), managedPaths };
   
       const ignored = config.watchOptions?.ignored ?? [];
       ignored.push(`**/node_modules/!(${moduleName})**`);
       config.watchOptions = { ...(config.watchOptions ?? {}), ignored };
   
       return config;
   };

Now, any time you update your source module, you can run yalc publish --push and your code will be properly loaded in the dependent module(s). It even works when npm start is running with create-react-app -- your changes will be hotloaded.

[filipsvensson]

Adding the signature option like this: yalc push --sig worked for me.

[lokeb]

Adding the signature option like this: yalc push --sig worked for me.

This is the solution, other than the above hacks.

Thanks @filipsvensson

[danny-does-stuff]

I have been able to get Hot Module Reloading working by using yalc link instead of yalc add. I'm interested to see if --sig works for me, since supposedly sig is true by default.

UPDATE: Using --sig on the publish/push command did work for me! With --sig I was able to use yalc add instead of yalc link and HMR was working. It seemed a little slower than using yalc link though. Thanks for the tip!

[superstooge]

I'm using yalc for a TypeScript shared library, consumed by a CRA app. The HML reloading does work for me (with or without --sig) but the push takes a very long time (approx 10s for any change, even a single char).

The shared library is bundled with rollup. I use rollup --watch to recompile on change: "rollup:dev": "npm run clean && npx rollup --config rollup.config.js --watch --watch.onEnd=\"yalc push --sig --changed\""

Is there anything I should change in this setup, to speed up things? Thanks! :)

[pm0u]

I seem to run into a similar issue with remove, I still have to rm -rf node_modules to get the original package back