Importing InitFragment class and other types for Dependency within a plugin

[steverep]

I'm trying to include a dependency similar to ProvidedDependency within a plugin, but I need to alter the stage so I need to rewrite the template. Getting started I'm stumbling on:

1. How to import the InitFragment class (or is it not exposed?)
2. How to import the DependencyTemplateContext type, which looks to be a prop of DependencyTemplate but I cannot find that either.

[alexander-akait]

How to import the InitFragment class (or is it not exposed?)

Feel free to send a PR and expose it 👍 because we already export Dependency, so it can be useful

How to import the DependencyTemplateContext type, which looks to be a prop of DependencyTemplate but I cannot find that either.

You can get it using dependencies.ModuleDependency.Template

[steverep]

Correct, I'm transpiling the async function introduced by Webpack when handling top level awaits. I looked into getting around an InitFragment and determined it was far more elegant just to use it. Here's a semi-final product: steverep/transform-async-modules-webpack-plugin#32.

When testing on a large project though, I'm running into a snag caused by Babel also needing to transpile a destructured assignment used by Webpack. It looks like checking whether it is supported is marked as a TODO:

https://github.com/webpack/webpack/blob/main/lib/async-modules/AwaitDependenciesInitFragment.js

[steverep]

Was able to get around the problem of destructuring with a Babel setting. Now I'm down to some Webpack errors when optimizing that seem to self-blame back to Webpack:

ERROR in ./src/common/datetime/absolute_time.ts
  RuntimeTemplate.importStatement(): Module /workspaces/frontend/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!/workspaces/frontend/node_modules/date-fns/esm/index.js has no id assigned.
  This should not happen.
  It's in these chunks: none (If module is in no chunk this indicates a bug in some chunk/module optimization logic)
  Module has these incoming connections: 
 ...

[steverep]

The errors go away with optimization.usedExports = false, but I have no idea what the cause is. I get a few of those errors all with the same module without an ID, and all in referencing modules that are not async but do import async modules.

Could this somehow be cause by a flaw in my dependency subclass?

[steverep]

Just following up to say I figured it out and released a new version. Running compilation.processModuleDependencies a 2nd time was corrupting things. I ended up just taking apart the method and stripping it down to a couple lines for adding dependencies after the fact:

https://github.com/steverep/transform-async-modules-webpack-plugin/blob/debb91e7cc0da76c7c9d36312388a7eaeeb7a982/src/index.cts#L166-L208

Anyway, thanks for your guidance. Here's a PR for Home Assistant to demo why this was worth it: home-assistant/frontend#20543.

[alexander-akait]

Sorry for delay, a lot of issue, glad to hear that you found a solution ❤️