Subresource Integrity support for Module Federation

[sowtame]

Hi, I'm adding support for the webpack federation module.
The main problem was that the wmf plugin creates mock chunks that are not used in production. It can be detected finding shared files by

export function wmfSharedChunk(
  chunk: Chunk,
  compilation: Compilation
): boolean {
  const rootModules = compilation.chunkGraph.getChunkRootModules(chunk);
  const isSharedModule = rootModules.some(
    (module) => module.type === "consume-shared-module"
  );

  return isSharedModule && rootModules.length === 1;
}

[sowtame]

guys, please look

[jscheid]

@sowtame thanks for your contribution and for your patience, I've been distracted in recent weeks. I'm going to take a look at this next week.

[sowtame]

@jscheid thanks, I've changed the implementation a lot, I'm using a more reliable way of finding modules using chunkGraph

[liruilong]

There's another scenario that needs to be filtered.
When using async import for a remote module, such as:

const B2View = defineAsyncComponent(() => import("mfRemoteModule/Example.vue"))

It also throws the error: Asset js/207.13044ce8.js contains unresolved integrity placeholders.
We need to find a new way to filter it.

[sowtame]

There's another scenario that needs to be filtered. When using async import for a remote module, such as:

const B2View = defineAsyncComponent(() => import("mfRemoteModule/Example.vue"))

It also throws the error: Asset js/207.13044ce8.js contains unresolved integrity placeholders. We need to find a new way to filter it.

hi, can you give a repository where you can reproduce the problem?

[AmsterGet]

Hi there!
Do you have any plans to take this further?

[Liubasara]

any progress?

[alexander-akait]

@jscheid friendly ping

[rrosenshain-sc]

There's another scenario that needs to be filtered. When using async import for a remote module, such as:

const B2View = defineAsyncComponent(() => import("mfRemoteModule/Example.vue"))

It also throws the error: Asset js/207.13044ce8.js contains unresolved integrity placeholders. We need to find a new way to filter it.

hi, can you give a repository where you can reproduce the problem?

@sowtame if you add this to the host bootstrap code you'd see Asset index.js contains unresolved integrity placeholders

// mock dependency
import("lodash");

import("app1")
  .then((module) => {
    console.log(module);
  })
  .catch((e) => console.error(e));

console.log("ok");

[rrosenshain-sc]

So there are 2 issues.
1 is that async import from above, I was able to fix that by modifying your changes a little:

-    const isWmfModuleIn = rootModules.some((module) => module.type === "consume-shared-module");
+    const isWmfModuleIn = rootModules.some((module) => module.type === "consume-shared-module" || module.type === "remote-module");

But I kept getting this:

ERROR in webpack/runtime/compat
Cannot read properties of undefined (reading 'getChunkRootModules')

I think It's because MiniCssExtractPlugin just based on this comment but I can't really be sure webpack/webpack#15172 (comment)

I added

+    if(!compilation.chunkGraph) return false;

And it compiles.

But I'm new to webpack internals so not sure if those are legit

[onemantooo]

bump

[AtaberkKilinctekin]

I download the @sowtame/webpack-subresource-integrity but still while bundling the files, i get this error message
(bootstrap.js:27 Failed to load TypeError: Cannot read properties of undefined (reading 'undefined'))

which the line is script.integrity = webpack_require.sriHashes[chunkId];
In this line chunk id is undefined.

We use micro fe.
new ModuleFederationPlugin({
name: 'name',
filename: 'remoteEntry.js',
exposes: {
'./app': './src/index'
}
}),
new SubresourceIntegrityPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: true
}),
I still cannot solve the problem here.