[Bug]: missing plugin compliation hooks

[bradzacher]

System Info

rspack version 0.6.0

Details

I was testing migrating our (quite complex and very bespoke) webpack setup to rspack.

Sadly I got the following error from one of our plugins:

compiler.hooks.thisCompilation.tap(name, compilation => {
    compilation.hooks.optimizeChunks.tap(
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// TypeError: Cannot read properties of undefined (reading 'tap')

It's a custom chunking plugin - so I figured it wasn't necessary for my quick test and I disabled it.
After disabling it I got a different error in a different plugin:

compiler.hooks.thisCompilation.tap(name, compilation => {
    compilation.hooks.runtimeRequirementInTree.for(
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// TypeError: Cannot read properties of undefined (reading 'for')

I didn't proceed any further after this as this second plugin is required.
Is there something I need to do to get these hooks working? Or are they not supported yet?

Reproduce link

No response

Reproduce Steps

I can provide a more complete repro if it's required - it's a bit hard to pull apart the logic from within our internal plugins for a repro.

[hardfist]

runtimeRequirementInTree hook is complex and it's not supported yet, your plugin may could be implemented using other hooks,can you tell us what functionality do your plugin implement?

[bradzacher]

@hardfist sorry I lost track of this

I'm not entirely sure as all this infra predates my tenure at Canva - I'm just looking to make things faster!

It looks like the plugin (called RtlCssPlugin) uses rtlcss to create two versions of every .css file - a <file>.ltr.css and a <file>.rtl.css

The usage of that specific hook is:

compiler.hooks.thisCompliation.tap(RtlCssPlugin.name, compliation => {
  const enabledChukns = new WeakSet();
  const addRtlCssRuntime = (chunk: Chunk) => {
    if (enabledChunks.has(chunk)) {
      return;
    }
    enabledChunks.add(chunk);
    compilation.addRuntimeModule(chunk, new RtlCssLoadingRuntimeModule());
    compilation.addRuntimeModule(chunk, new GetChunkFilenameRuntimeModule( ... ));
  };
  compilation.hooks.runtimeRequirementInTree
    .for(RuntimeGlobals.ensureChunkHandlers)
    .tap(RtlCssPlugin.name, addRtlCssRuntime);
  compilation.hooks.runtimeRequirementInTree
    .for(RuntimeGlobals.hmrDownloadUpdateHandlers)
    .tap(RtlCssPlugin.name, addRtlCssRuntime);
});

where RtlCssLoadingRuntimeModule essentially defines a small module which sets a global variable.

If there's a better way to do this I'm more than happy to refactor it - I just don't know enough about webpack plugins to know what the best course of action is!

[hardfist]

I'm not sure whether this can be implemented by runtimeModule hooks, @LingyuCoder any ideas?

[LingyuCoder]

I'm not sure whether this can be implemented by runtimeModule hooks, @LingyuCoder any ideas?

Runtime modules use the whole compilation object to generate their contents. So the compilation.addRuntimeModule() can not be port easily.

The compilation.runtimeModule hook can only modify the content of module which has been exists. Perhaps you can try concatenating the content of RtlCssLoadingRuntimeModule and GetChunkFilenameRuntimeModule to the end of the content of EnsureChunkRuntimeModule and CssLoadingRuntimeModule.

[bradzacher]

I'm on parental leave ATM (so I'm not working on company stuff) - I'll get back to you in a few weeks once I've returned and chatted to the subject matter experts.