Nuxt.js: `build:compile` Nuxt hook seems to not being triggered correctly

[kevinmarrec]

Version

v2.3.4

Reproduction link

https://github.com/kevinmarrec/nuxt-build-compile-hook-issue

Steps to reproduce

Clone the reproduction link repository
Install deps : yarn or npm install
Run in dev mode : yarn dev or npm run dev

Look at the ~/modules/test module, it's gonna output a compile on the therminal when the build:compile hook is triggered.

Change one or multiple times the ~pages/index.vue to trigger a new Webpack compilation through the Hot Reload Module.

What is expected ?

build:compile hook should be triggered at every Webpack compilation

What is actually happening?

build:compile hook is triggered only once (in fact twice but one for server, one for client) at the first compilation, and never for further Webpack compilations.

Additional comments?

See : https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/builder.js#L129

I suggest replacing this line by something similar done for the build:compiled hook, e.g. using the Webpack Compiler hook callback itself.
See : https://webpack.js.org/api/compiler-hooks/#compile

So it could be something like

compiler.hooks.compile.tap('???', async () => {
  await nuxt.callHook('build:compile', { name, compiler }
})

_{This bug report is available on Nuxt community (#c8286)}

[pi0]

@kevinmarrec, yes you are completely right. But as this hook was working like this at least since v2.0.0 I suggest introducing correct webpack: prefixed hooks. Meanwhile, you can use build:resources or directly tapping webpack using extend.

[kevinmarrec]

@pi0 Alright !
Yeah, that's sure we can't change current hooks, cause it will result in breaking change for people using the hook with the current behavior, so introducing correct and new webpack: prefixed hooks and keeping the "not so correct" build:compile hook will be the best solution 👍

[sustained]

I am facing this issue also on 2.8.1. This supposed webpack: namespace of hooks doesn't seem to exist. Only build:compiled is called for the quick compiles, afterwards but build:compile and others are never called beforehand - only for the long/slow compile (e.g. change Nuxt config).

That hook is not right for my use-case because I'm generating JSON, which causes the "updated" message and triggers a recompile = infinite loop. So I need to use build:compile or some such but it is only being called in some cases.

Surely there is a reliable way for me hook into this?

[sustained]

And build:resources doesn't do what I want, it's often not being called also.

!!! build:compile
JSON directory is /home/sustained/Projects/sustained.name/static/json                                                                                                   
Successfully wrote the blog JSON files.                                                                                                                                 

✔ Client
  Compiled successfully in 13.90s
✔ Server
  Compiled successfully in 13.30s

!!! build:resources                

!!! build:resources            

ℹ Waiting for file changes                                                                                                                                               
ℹ Memory usage: 222 MB (RSS: 422 MB)        

↻ Updated pages/blog/_category/_post.vue          

✔ Client
  Compiled successfully in 588.98ms
✔ Server
  Compiled successfully in 567.23ms

!!! build:resources                                                                                                                                                     
!!! build:resources (repeated 1 times)          

↻ Updated pages/blog/_category/_post.vue        

✔ Client
  Compiled successfully in 489.31ms
✔ Server
  Compiled successfully in 519.31ms

↻ Updated pages/blog/_category/_post.vue (repeated 2 times)                                                                                                              16:36:10
↻ Updated pages/blog/_category/_post.vue                                                                                                                                 16:36:14

✔ Client
  Compiled successfully in 469.68ms
✔ Server
  Compiled successfully in 481.75ms

↻ Updated pages/blog/_category/_post.vue (repeated 2 times)                                                                                                              
↻ Updated pages/blog/_category/_post.vue                                                                                                                                 

✔ Client
  Compiled successfully in 436.38ms
✔ Server
  Compiled successfully in 435.09ms

↻ Updated pages/blog/_category/_post.vue (repeated 2 times)                                                                                                              
↻ Updated pages/blog/_category/index.vue                                                                                                                                 

✔ Client
  Compiled successfully in 263.73ms
✔ Server
  Compiled successfully in 279.31ms

As you can see often it is not called.

I need basically to hook into when any file is added/removed/modified OR a sub-directory is added/removed/modified within a specific directory.

[kevinmarrec]

/cc @pi0 Any idea ? Do we still need to implement new webpack: hooks or is there an existing hook that would fit @sustained needs ? I don't remember what was my use case and I removed my repository 🤦🏼

[galvez]

@kevinmarrec @pi0 fwiw, the build:compile hook works fine for me.

[BenceSzalai]

The build:resources hook works fine for me. build:done and build:compile however only triggers once per config change (↻ Updated nuxt.config.js events) or after the first time the npm task is started. In other words those hooks are not triggered for the changes made to the ↻ Updated path/to/any/other/file events. Only build:resources does work for them.