Add option to enable/disable followSymlinks of watchpack

[immortal-tofu]

Context:
You have project A in babel 6 and project B transpiled via babel 7. You run a webpack watch in package B directory to create bundle while you code.
If you npm link package B in package A, and run webpack in package A, it will throw an error because he doesn't find dependencies.
A webpack's issue is open here: #1866

Solution
In webpack, it's possible to disable symlinks via symlinks: false. It works and babel (of package A) won't try to transpile package B. Sadly, if you do this, webpack won't react to change.
It's possible to change this behavior with followSymlinks in watchpack/chokidar. A PR has been added there to add this option: webpack/watchpack#72

Now, we need the last part: add an exposed option in webpack configuration to enable/disable this watchpack new option. As stated by @TheLarkInn, it could be planned for webpack v5.

[SEAPUNK]

Why is this planned for webpack 5? Can't this land in webpack 4 as a feature request? I don't see how any of this would be a breaking change, this is primarily a non-breaking feature (or even a bugfix, since watching is obviously broken).

[bcowell]

Would also like to see this included in webpack 4 as it is a bug.

[Globegitter]

Agree with the sentiment here, this is either a backwards compatible feature or a bug-fix so there should be no issue shipping it with with v4 and it seems quite a few people would benefit from it.

[immortal-tofu]

Well, since PR on watchpack didn't land yet, we can't do a lot... Comments and upvote PR linked in inital post :(

[achrefhafedh]

AND FINALLY in Webpack 5

[Neira1991]

greatttt!!!!

[wittibs]

@birdy @evilebottnawi - I saw this issue was marked as "D0 first commit" so I decided to pursue it :P

In researching this issue, I think I understand the problem, but I am unable to reproduce the issue with webpack not picking up on changes in symlinked module. I created a sample repo to demonstrate how I am unable to reproduce this issue. Is this still an issue? Or has it been fixed?

Thanks!

[neonick]

@immortal-tofu it looks like something you can close

[immortal-tofu]

I close issue for now. I think it's ok now.

[immortal-tofu]

For information, watchpack finally add the option for followSymlinks.
webpack/watchpack#114
Now we need this option exposed in webpack.
Maybe webpack solved the issue with something else. I didn't try again.

[immortal-tofu]

@wittibs Basically the issue is simple:

• Create a project A with a babel 6 and some plugin in .babelrc
• Create a project B with babel 7 and some plugin in .babelrc. This project is transpiled "main": "dist/index.js"
• Link project B in project A.
• Start webpack with babel-loader in project A.
  Project A's Webpack will try to transpile project B with babel 6 and even use their .babelrc file. Since you have 2 versions of babel, you have issue like "this module doesn't exist" because it exists in Project B but not in Project A...
  A mess.

First solution:
So far, you can disable symlink with symlink option. It works, but you loose watch. If your linked module changes, Project A's webpack won't rebuild. But at least, it won't try to transpile or read your linked module's babelrc.

Second solution:
You want the first solution BUT with the watch ability. Tadam, now you can since watchpack exposed followSymlinks option. Sadly Webpack doesn't allow you (yet) to use this param on watchOptions.

This is my summary. Maybe the problem described doesn't exist anymore, I switched to babel 7 everywhere so I encounter far less issue.

I keep close this issue, but tell me if it occurs again. Since watchpack added the option, if the problem still occurs, it can be solved by webpack team.

[EmpireJones]

I believe this issue still exists regarding files in symlinked folders not being watched when symlink is set to false. It looks like followSymlinks was never exposed, so this should be re-opened, correct?

[alexander-akait]

@EmpireJones fixed in webpack@5

[slint]

@immortal-tofu, @evilebottnawi, @achrefhafedh in what PR/commit was this solved in webpack@5? I can see that #9399 bumped watchpack's version, but there is no way to e.g. pass the followSymlinks: true option, e.g. via watchOptions.

IMHO issue should be re-opened until there is a way to also be able to pass options to Watchpack.

[barisusakli]

Is this really fixed in v5?

[immortal-tofu]

I don't know if it's fixed in v5. I opened this issue 2 years ago and so far, I didn't see an answer "Problem solved see commit 35D43F53" ;)

[alexander-akait]

Solved for webpack@5, you can the option here https://github.com/webpack/watchpack#api

[slint]

Solved for webpack@5, you can the option here https://github.com/webpack/watchpack#api

That's on Watchpack (i.e. it now allows passing the flag). But what would an appropriate weback.config.js look like though to use the flag? I imagined something like this:

module.exports = {
  //...
  watchOptions: {
    followSymlinks: true
  }
};

Or to allow full flexibility on what is passed to the Watchpack constructor:

module.exports = {
  watchOptions: {
  //...
    watchpackConfig: {  // this probably overrides Webpack's default config options 
      followSymlinks: true,
      // ...
    }
  }
};

But none of these are reflected in the WebpackOptions schema currently.

[alexander-akait]

Oh, yes, we need update schema, WIP

[barisusakli]

Thanks, I just modified the source and changed followSysmlinks to true for now.

[aviramaz]

It'll be solved as part of webpack v5?
Someone has any recommendation how to implement nicely for webpack v4?

[slint]

Not a particularly "nice" way, but since Webpack v5 is not yet released, a solution is to use the patch-package library to patch watchpack. Here's the patch diff, which also sets the depth parameter to 1 (needed for MacOS):

 
diff --git a/node_modules/watchpack/lib/DirectoryWatcher.js b/node_modules/watchpack/lib/DirectoryWatcher.js
index 940f616..210a1b7 100644
--- a/node_modules/watchpack/lib/DirectoryWatcher.js
+++ b/node_modules/watchpack/lib/DirectoryWatcher.js
@@ -53,8 +53,8 @@ function DirectoryWatcher(directoryPath, options) {
 	this.watcher = chokidar.watch(directoryPath, {
 		ignoreInitial: true,
 		persistent: true,
-		followSymlinks: false,
-		depth: 0,
+		followSymlinks: true,
+		depth: 1,
 		atomic: false,
 		alwaysStat: true,
 		ignorePermissionErrors: true,

[WeijieZhu0204]

@slint It works !

[alexander-akait]

Implemented followSymlinks https://github.com/webpack/watchpack

[alexander-akait]

Need to send a PR to watcherOptions https://github.com/webpack/webpack/blob/master/schemas/WebpackOptions.json#L3596

[nitinkatyal1314]

Is this working with webpack 5? I have enabled followSymlinks but no luck. This is my devServer configuration

devServer: { followSymlinks: true }

I see that changes to dependent library component (linked via npm link) triggers recompilation but the changes are not reflected in the browser.

[alexander-akait]

devServer doesn't have this option

[nitinkatyal1314]

devServer doesn't have this option

Are you sure about this? I am a little confused based on docs which actually point to watchOptions inside devServer conf. Also, when I put { followSymlinks: true } in webpack conf, nothing happens but adding it to devServer actually makes my app to recompile (though it does not hot reloads).