next.jspackage.jsonpackagingyarnpkg-v2

What is the proper way to work with local packages using yarn in Next.js project?


I work in a Nextjs project that uses custom component library. The library is developed by the team and I make changes there as well.

In order to test that changes work properly before publishing, I build and pack project, then install it locally using yarn add <file_path> or inserting <file_path> straight into package.json. When I do this and update dependencies running yarn command, the command works and I can see new dependencies installing in the terminal but often changes are not picked when I run dev server. I have to re-install node_modules, delete yarn.lock and .next to run server in order to have changes applied. Sometimes I only delete the package I am trying to install locally from node_modules and its description from yarn.lock, then reinstall dependencies and succeed, and sometimes it doesn't work.

I cannot see the system behind the actions I take and would like to know what is the best way to work with packages locally in Nextjs project with yarn as package manager without wasting time to re-install node_modules.

Additional question: I saw there is watch API for yarn 1.0.2 and additional libraries that can track changes in files, could these be used to solve my issue?


Solution

  • The best thing team I work in came up with is to use yalc. It provides a --sig flag for publishing local package locally. This flag adds a hash to the package. It helps to avoid re-installing the whole node-modules on each update and ensures that the latest package changes are always being picked by yarn on install.

    There is also an option to attach hash to packed file on our own to decide the issue but we decided to go with a ready solution (yalc).