Is there any way to make this plugin work with another project that has been `yarn link`ed?

[mbiggs-gresham]

We have a reusable library component that we develop (built using rollup), that we then use in our main app by running yarn link.

When we build the reusable component webpack goes through the motion of realising something has changed, but the changed code never takes effect in the main app. We have to stop webpack dev-server and restart it.

I'm just wondering if this is possible or if anyone has on ideas on how to make this work?

[pmmmwh]

Maybe you can explain the setup in more details? This plugin by default ignores node_modules, maybe you would want to override that (also for the Babel plugin).

[mbiggs-gresham]

In our shared component called @company/grid we execute yarn link and then a rollup --watch. This means any time we make code changes the project automatically recompiles.

In our main application we run yarn link @component/grid and I believe this actually does some kind of symlinking from the component to the applications node_modules folder.

Ideally we would like it so that when the grid component rebuilds, the main application automatically picks up those changes are refreshes. We're currently having to kill dev-server and restart it each time.

It sounds like the exclusion of the node_modules folder is probably the key missing issue. So should I just change the exclude param to exclude all of node_modules except the node_modules/@company folder? Can you also give any more info on what also may need changing for the babel plugin that you mentioned.

Any help is very much appreciated. Thank you.

[pmmmwh]

It sounds like the exclusion of the node_modules folder is probably the key missing issue. So should I just change the exclude param to exclude all of node_modules except the node_modules/@company folder? Can you also give any more info on what also may need changing for the babel plugin that you mentioned.

Yes, change the exclude pattern to include your scope would work. To change the Babel setup, you would have to make sure your babel-loader (which contains the react-refresh/babel plugin) also processes your scope inside node_modules.

[praveenpuglia]

@pmmmwh can you given a example? let's say I have a module @smallcase/components linked via npm link. This is the babel-loader configuration I have on webpack.

 {
          test: /\.(ts|js)x?$/,
          include: [
            path.resolve(__dirname, 'node_modules/@smallcase/'),
          ],
          exclude: [
            path.resolve(
              __dirname,
              'node_modules/@smallcase/subscription-widget',
            ),
          ],
          use: [
            {
              loader: 'babel-loader',
              
              options: {
                plugins: [
                  // This enables a better HMR experience for react.
                  env.LOCAL_SERVE === 'true' &&
                    require.resolve('react-refresh/babel'),
                ].filter(Boolean),
              },
            },
          ],
        },

based on your comment above, it feels like this should work for node_modules/@smallcase/components package which has been symlinked, but it doesnt.

I also have webpack > config.resolve.symlinks:false. Can that affect the situation?

@mbiggs-gresham did you get it to work somehow?

[mbiggs-gresham]

I did try numerous different configuration options, mostly messing with the regex of what should be included. It always seemed like it should have worked, webpack went through the motions of detecting a change and recompiling, but it never reflected that on screen.

Unfortunately we have now switched to vite, where this just works out of the box so i'm afraid I can't offer any more help.