Yalc doesn't work in a vite project

[xisenbao]

No description provided.

[k-wilmeth]

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!

[xisenbao]

这是来自QQ邮箱的假期自动回复邮件。你好，您的邮件我已经收到，会尽快给您回复,谢谢!

[ericskelton]

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 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

[xisenbao]

这是来自QQ邮箱的假期自动回复邮件。你好，您的邮件我已经收到，会尽快给您回复,谢谢!

[kishanio]

my existing yalc installation w/ vite stopped working.

[xisenbao]

这是来自QQ邮箱的假期自动回复邮件。你好，您的邮件我已经收到，会尽快给您回复,谢谢!

[grahamhency]

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! 
    }
  }
});

[xisenbao]

这是来自QQ邮箱的假期自动回复邮件。你好，您的邮件我已经收到，会尽快给您回复,谢谢!