Yarn Link, Changes To Linked Package Not Reflected in Host App

Question

I'm learning about using yarn link to work on a package and have changes reflected in a host app and I either don't get something or somethings not working.

It is all built in angular5..

I have an app MyApp that contains, among others, @org/my-package in node_modules.

I need to make changes to my-package and in order to serve the changes I use yarn link to create symlink and test the package in MyApp.

This is what I do...

In my-package, I run a build. It creates the distribution files. I then cli into dist package and run yarn link.. This is success.. I get the instruction to use yarn link @org/my-package in MyApp cli..

Then I go to MyApp, and I run yarn link @org/my-package. This is success as well..

However when I make changes in my-package and run a build again, they don't get reflected in MyApp.

What am I not understanding?

I get no errors.

Is @org/my-package that is in node_modules in MyApp supposed to be there or not? Isn't yarn link on the dist in my-package meant to override that one?

No matter how much I search it looks like yarn documentation is a bit light on this topic.

I had this problem, and it resolved as soon as I restarted webpack-dev-server in my host app. webpack-dev-server loads a module once then caches it, assuming that it won't change. Changing package code requires a restart. — Luke Griffiths, Sep 13 '19 at 19:18
But can you do it with hot reload? I mean you obviously restart the app, but how to make the hot reload see changes you made in dep package and hot reload the main app? — Adam Mazurkiewicz, Aug 08 '21 at 15:39
@LukeGriffiths suggestion pointed me to the terminal where the project dev server was running - in my case, the app was hanging during the build on a syntax error that had already been fixed in the subsequent build - long story short... the most suggested IT solution worked for me `turn it off, then turn it back on` after that my hot reload kicked back in — MCGRAW, Aug 12 '22 at 17:21

score 5 · Answer 1 · answered Aug 24 '18 at 06:39

I faced similar kind of a issue. But what I did was edit the package.json in the project that depends on the component library to for example "@org/my-package": "link:../packages/dist/my-package" (edit the path) This only works with yarn, if you use npm this is not an option, but you could use npm link.

I had to do a yarn install after that in the project. So, when you re-build my-package, the @org/my-package that is in node_modules in MyApp supposed to be updated.

社长长 · Answer 2 · 2022-09-14T09:08:36.010

1

Delete node_modules and reinstall all the packages and reset yarn link your_local_package work fine for me.

edited Sep 14 '22 at 09:08

answered Sep 14 '22 at 09:07

社长长

11
2

score 1 · Answer 3 · edited May 11 '23 at 10:09

I had this problem too.

When I updated my library, it didn't reflect in my main project. I looked inside the modules and there was my package. Everything was fine and up to date, nothing was wrong. That's when I decided to delete the angular\cache folder, and it worked. Try this setting inside your angular.json. It worked for me:

"cli": {
    "cache": {
        "enabled": false
    }
}

For more information on clearing cache

Yarn Link, Changes To Linked Package Not Reflected in Host App

3 Answers3