Yalc not working for rapid development about yalc HOT 8 OPEN

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

from yalc.

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/

from yalc.

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/**',
						],
					};

from yalc.

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.

from yalc.

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.

from yalc.

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

This is the solution, other than the above hacks.

Thanks @filipsvensson

from yalc.

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!

from yalc.

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! :)

from yalc.