Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subresource Integrity support for Module Federation #220

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

sowtame
Copy link

@sowtame sowtame commented Aug 24, 2023

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
Copy link
Author

sowtame commented Sep 26, 2023

guys, please look

@jscheid
Copy link
Collaborator

jscheid commented Oct 6, 2023

@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
Copy link
Author

sowtame commented Oct 9, 2023

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

Copy link

@liruilong liruilong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Author

sowtame commented Oct 12, 2023

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
Copy link

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

@Liubasara
Copy link

any progress?

@alexander-akait
Copy link

@jscheid friendly ping

@rrosenshain-sc
Copy link

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
Copy link

rrosenshain-sc commented Mar 30, 2024

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
Copy link

bump

@AtaberkKilinctekin
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants