Webpack Watch and Serve with DevKinsta

[Imabi]

Hello Community,

is there any recommendations for a Webpack watch and serve setup?

I am desperately trying to find a way to make it work with a live reload. But facing this kind of an error:

Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content\themes\storefront-child\src\js'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content\themes\storefront-child\fonts\hind'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content\themes\storefront-child\fonts\montserrat'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content\themes\storefront-child\src\scss'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content\themes\storefront-child'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content\themes'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel\wp-content'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public\badspiegel'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta\public'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes\DevKinsta'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker\volumes'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data\docker'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\data'
Watchpack Error (watcher): Error: EISDIR: illegal operation on a directory, watch 'Z:\'

Somehow it tries to watch the whole Docker mount?

Kindest regards,

Abidin

[VladimirM (Vladimir Milosavljević)]

Hello Abidin

I have to admit I am not certain what is causing this and we’ll need to ask our developers to check.

Can you please send the entire main.log file to us?

Thank you!

Kind regards

[Imabi]

main.log (1001.0 KB)

Main.log file attached. Thank you very much.

[jackirish (Jack I.)]

Hi @Imabi !

It looks like NPM is trying to run on a directory here, instead of files: node.js - NPM stuck giving the same error EISDIR: Illegal operation on a directory, read at error (native) - Stack Overflow

Can you please ensure your package.json is looking specifically for files rather than a directory, or provide myself and my colleague @VladimirM with a copy of your package.json via a DM?

[Imabi]

webpack.config.js.txt (3.0 KB)
package.json.txt (1.1 KB)

Package.json and Webpack. onfig files attached.

Thank you for your effort to help me with this issue.

[VladimirM (Vladimir Milosavljević)]

Thanks for sending those. We’ll review them and get back to you.

Kind regards,
Vladimir M

[VladimirM (Vladimir Milosavljević)]

Hello @Imabi

We are not able to determine the cause based on the files you provided as we don’t see the directories referenced in them.

We might need access to your repo though that is out of scope, and this point I can’t guarantee we’ll find an answer, but if there’s anyway we can view the repo, let us know.

Kind regards

[Imabi]

[removed by administrator]

I appreciate your help with this matter, as working with DevKinsta has just started to become fun, and I’m only one step away from perfection.

[VladimirM (Vladimir Milosavljević)]

Hello @Imabi

Thanks for sending the files, we are still reviewing them. So far, I can’t see the reason why Watchpack is watching the directories.

If we get anywhere with it, I’ll let you know.

[Imabi]

Thank you very much for your effort.

I’ve noticed the following: When I use polling with a value of 1000 for the regular watcher, the error doesn’t occur.

However, I couldn’t find a way to set up polling for the webpack-dev-server watcher. But what exactly does polling have to do with watching certain files?

[jackirish (Jack I.)]

Hi @Imabi ,

Unfortunately, we haven’t been able to determine what’s causing this from our side. It appears to be specific to Webpack and its configuration. My guess is that because module.exports doesn’t specify a list of files to watch, it’s defaulting to trying to watch every file on the pod - possibly because it’s looking at root (/) instead of the application root (./).

I don’t think we’ll be able to give this a proper answer though, because we lack detailed information on how Webpack is actually functioning in this way, and we haven’t been able to replicate this behavior. You may wish to reach out to them, if only to get more information on how exactly it tries to apply its settings in this context.

[Imabi]

Thank you for the effort though.

I posted a question on Stack Overflow:

Webpack Watcher Error: "EISDIR: illegal operation on a directory" with WSL2 and Docker paths

Let’s see, maybe someone will be able to help. But since this is a very niche problem, I think I might be left alone in this matter.