wclr
Yalc doesn't work in a vite project
I'm able to get yalc to work with vite however, for live re-load changes I have not found a solution for that. I am using React 18 and my current process is
from npm package:
npm run build
yalc publish --push
yalc push --sig
then from my React 18 application:
yalc add @myorg/components
npm run build
I have to do those steps everytime I make an update in my npm package to reflect the change in my React application.
I have tried using the --replace flag but it still requires the same commands to reflect new changes.
Does anyone have any solution for this on how to reflect automatic updates with vite? It would make development a whole lot smoother and enjoyable for us. Thanks!
I'm able to get yalc to work with vite however, for live re-load changes I have not found a solution for that. I am using React 18 and my current process is
from npm package:
npm run build yalc publish --push yalc push --sigthen from my React 18 application:
yalc add @myorg/components npm run buildI have to do those steps everytime I make an update in my npm package to reflect the change in my React application. I have tried using the
--replaceflag but it still requires the same commands to reflect new changes. Does anyone have any solution for this on how to reflect automatic updates with vite? It would make development a whole lot smoother and enjoyable for us. Thanks!
I use yalc in a React vite project and experienced similar issues. The problem is with vites dependency optimization, it doesn't know to reload the dependency everytime it changes. The best solution I've found is to have nodemon watch the .yalc folder and have it restart the dev server with the --force flag to force it to reload the dependencies. This is what my start script looks like
nodemon --signal SIGKILL --watch .yalc --exec npx yarn start --force --no-open
On the library side, I also use nodemon to watch for changes, when it detects a change it builds the library runs yalc push.
It isn't an ideal solution because it takes time for the dev server to restart, especially using the --force flag, but it has worked pretty consistently for the past year or so and all the builds happen automatically which is nice. If you (or anyone else) has come up with a better solution, please let me know
Yalc does work! I ran into the same issue and ended up finding a solution.
I currently run yalc publish --push from the library directory and this still works.
The trick to this is in the vite.config.ts file in the consuming repo:
export default defineConfig(({ mode }) => {
return {
optimizeDeps: {
entries: ['your-package'], // This is the line!
}
}
});
A note on this is that you should not do this for production! I'd recommend using mode to determine when you should not optimize these, see below:
export default defineConfig(({ mode }) => {
return {
optimizeDeps: {
entries: mode === 'development' ? ['your-package'] : undefined, // This is the line!
}
}
});
Another viable option is to use environment variables in the command line to determine if you're expecting yalc stuff to change or not. Something along these lines:
// package.json
scripts: {
"start:yalc": "YALC=true vite"
}
// vite.config.ts
export default defineConfig(() => {
return {
optimizeDeps: {
entries: process.env.YALC ? ['your-package'] : undefined, // This is the line!
}
}
});
