0

I have a component library [design-system]. I want to use that library in another project. I did run npm-link in 'design-system' and npm link design-system in the project.

First, the link didn't work, after I deleted package-lock.json and did npm i. I could see, my component refers to the design system's dist index path. Even If I change anything in the design system and build it. It is reflecting immediately in the project. I can see the design-system's code in VS Code IDE.

But, when we run the program, the changes are not reflecting in the UI.

For example, I commented on the console.log code in design-system

enter image description here

even I can see this code in the package by clicking 'Go to Definition'. But in the browser, the code is not updated.

enter image description here

I cleared 'Application cache' and tried again. I don't know what I am missing. Please help me with this.

Thanks!

Danielprabhakaran N
  • 530
  • 1
  • 7
  • 16

1 Answers1

0

you need to run the build in watch mode for your design-system library. Now for each change, the library will build and the bundle will update hence you will see the changes reflecting.

Alternatively, for development purposes, you can do something like

"design-system": "file:../relative-path-from-pkg-json"

instead of npm-link. still, if you can target the non-build version of your library. it may or may-not work deponding on your build tooling.

Or you can get real fancy and try Nx Monorepo approach which will take care of everything about tooling. while you can focus on your development.

Fasid Mpm
  • 557
  • 6
  • 10