9

Context

I have two projects, main and styles. Main uses styles as an npm package, importing it as @companyname/styles. I need to make changes to styles and want to link it locally to see these changes in main.

This is a react app, using Webpack and babel. Yarn is the favoured package manager.

Problem

Using npm link OR yarn link works in so far as I can go into the node_modules/@companyname/styles folder in main and see my changes in there.

However, no changes are reflected in the browser.

I only use one or the other (yarn/npm) at a time, but problem exists with either one

Things I've tried

  • Deleting node_modules, reinstalling and re-linking
  • Unlinking and re-linking
  • Rebuilding
  • Clearing npm cache, clearing yarn cache
  • Viewing site in incognito
  • Deleting dist folder in main and reinstalling
  • Adding CleanWebpackPlugin to my webpack config
  • Adding hot: true, to my devServer config in webpack config.

TL;DR

Yarn/npm link not showing my changes in browser, however will show changes in node_modules. Something causing browser to not read changes. Please help.

Lauripops
  • 412
  • 1
  • 3
  • 11
  • 4
    Did you ever find an answer to this? Having the same problem. – Zane Claes Nov 14 '20 at 17:03
  • Same here. Did you find the cause? – D Park Jul 04 '22 at 19:15
  • I'm having this problem too. Anyone...? Help...? – Alienown Jul 07 '22 at 15:22
  • Just to be sure (although if you're seeing the changes in `node_modules` you have probably done it), here are the steps I follow to link my local library: in `styles` (at the level of `styles/package.json`), I run `yarn link`. Make sure that in `styles/package.json`, name is `@companyname/styles`. Then in the consuming package, `yarn link @companyname/styles`. Then I restart the development server, and it works. Hope it helps – Jérémy Rippert Dec 02 '22 at 10:18

2 Answers2

0

Have you tried deleting the lock file?

rm package-lock.json
npm clean-install
skube
  • 5,867
  • 9
  • 53
  • 77
0

the cause is in webpack configuration. It took me days to find the perfect combination for symlink packages.

In my case, my project was a Vue app.

So here's a summary of my findings for people from the future (for Webpack 5):

const path = require('path');

module.exports = {
  resolve: {
     symlinks: false // Important so that symlink packages are resolved to their symlinked location
     // If your package contains frontend framework components, prevent two instances of the framework (React for example), one from the app and the other one from the symlink package
     // Kudos to https://stackoverflow.com/a/68497876/11840890
     alias: {
        react: path.resolve('./node_modules/react'),
        '@': path.resolve(__dirname, './src') // Add this alias if you get a new issue after setting up the first one
     }
  },
  snapshot: {
    // Even though added changes on the symlink package may trigger rebuild, they might not be seen on the browser (using HMR or not)
    // To prevent reloading dev server every time, add this (it will include only node_modules but your package in the cache):
    managedPaths: [
      /^(.+?[\\/]node_modules[\\/](?!(@author[\\/]your-package))(@.+?[\\/])?.+?)[\\/]/,
    ],
  },
}
furtivesock
  • 43
  • 5