Compiler.hooks.normalModuleFactory and NormalModuleFactory.hooks.createModule (support @vanilla-extract/webpack-plugin)

[lalexdotcom]

What problem does this feature solve?

Some hooks are missing for compatibility with @vanilla-extract/webpack-plugin (and I suppose other plugins may use them)
Vanilla extract CSS is a build-time css-in-js

I see in the code that some hooks are missing in Compiler and NormalModuleFactory:

• compiler.hooks.normalModuleFactory
• nmf.hooks.createModule.tap
• (and nmf.hooks.afterResolve for webpack 4, but rspack is seen as Webpack 5)

What does the proposed API of configuration look like?

const {
  VanillaExtractPlugin
} = require('@vanilla-extract/webpack-plugin');

module.exports = {
  plugins: [new VanillaExtractPlugin()]
};

[zackarychapple]

After resolve can be connected to #2619

[lalexdotcom]

I see this issue is tagged "awaiting more feedback": FMI, what kind of feedback does it need?

[zackarychapple]

@lalexdotcom would you mind testing with the latest, there is an underlying issue that was referenced that is already merged. We've also started using NMF with Angular so this issue should be resolved. If you can confirm we can close this issue.

[lalexdotcom]

Hey @zackarychapple !

It looks like the Compiler.hooks.normalModuleFactory is there now, thanks to the team (and Angular)!

But the NormalModuleFactory.hooks.createModuleisn't there yet... I think this hook from NormalModuleFactory is not used by Angular...

 [Error: napi error: GenericFailure - TypeError: Cannot read properties of undefined (reading 'tap')
<e>     at /workspace/tools/build/node_modules/.pnpm/@vanilla-extract+webpack-plugin@2.2.0_@types+node@18.11.18_sass@1.58.0_webpack@5.75.0/node_modules/@vanilla-extract/webpack-plugin/dist/vanilla-extract-webpack-plugin.cjs.dev.js:187:30

[lecstor]

In case this is the "more feedback" you're looking for, I hit the same issue with a brand new project over the weekend.

[webpack-dev-middleware] [Error: napi error: GenericFailure - TypeError: Cannot read properties of undefined (reading 'tap')
<e>     at /Users/jason/dev/radix-extract/node_modules/@vanilla-extract/webpack-plugin/dist/vanilla-extract-webpack-plugin.cjs.dev.js:173:30
<e>     at Hook.eval (eval at create (/Users/jason/dev/radix-extract/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
<e>     at Hook.CALL_DELEGATE [as _call] (/Users/jason/dev/radix-extract/node_modules/tapable/lib/Hook.js:14:14)
<e>     at Compiler._Compiler_newCompilation (/Users/jason/dev/radix-extract/node_modules/@rspack/core/dist/Compiler.js:771:36)
<e>    0: _napi_register_module_v1
<e>    1: <unknown>
<e>    2: <unknown>
<e> ] {
<e>   code: 'GenericFailure'
<e> }

"@rspack/cli@npm:0.3.0-canary-e3901c6-20230827005435":
  version: 0.3.0-canary-e3901c6-20230827005435
  resolution: "@rspack/cli@npm:0.3.0-canary-e3901c6-20230827005435"

[hardfist]

sorry these hooks are difficult to implement now and it may take some time for us to implement

[felixmosh]

Same here, i18next-hmr requires the createModule hook.

[xc2]

compiler.hooks.normalModuleFactory and nmf.hooks.createModule have been shipped in Q1 2024. Please give it a try.