You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: merge increment B - documentation and changesets
- Add changesets for enhanced layer support features
- Update advanced sharing documentation with nodeModulesReconstructedLookup
- Update experiments documentation with filter options
- Update Vite guide with latest federation features
- Document new sharing capabilities and configuration options
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
Refactor and enhance module federation support for Next.js.
6
+
7
+
- Introduced `getShareScope` function to dynamically generate the default share scope based on the client or server environment, replacing static DEFAULT_SHARE_SCOPE declarations.
8
+
- Implemented `RscManifestInterceptPlugin` to intercept and modify client reference manifests, ensuring proper prefix handling.
9
+
- Refined server-side externals handling to ensure shared federation modules are bundled.
10
+
- Simplified and modularized sharing logic by creating distinct functions for React, React DOM, React JSX Runtime, and React JSX Dev Runtime package configurations.
11
+
- Captured the original webpack public path for potential use in plugins and adjustments.
12
+
- Enhanced logging for debug tracing of shared module resolution processes in runtimePlugin.
Copy file name to clipboardExpand all lines: apps/website-new/docs/en/configure/advanced-sharing.mdx
+30-62Lines changed: 30 additions & 62 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,6 +26,7 @@ interface SharedConfig {
26
26
issuerLayer?:string; // Restrict config to apply only when the consuming module (issuer) is in this layer.
27
27
include?:IncludeExcludeOptions; // Rules to include specific modules/versions
28
28
exclude?:IncludeExcludeOptions; // Rules to exclude specific modules/versions
29
+
nodeModulesReconstructedLookup?:boolean; // Enable enhanced matching for relative imports for this shared item
29
30
}
30
31
31
32
interfaceIncludeExcludeOptions {
@@ -83,6 +84,24 @@ new ModuleFederationPlugin({
83
84
});
84
85
```
85
86
87
+
## How Share Matching Works
88
+
89
+
:::note
90
+
Module Federation matches shared modules in a specific order. This applies to both providing and consuming shared modules, and is essential for advanced sharing scenarios.
91
+
:::
92
+
93
+
**Matching order:**
94
+
95
+
1.**Direct match:** Exact match for the requested module name (e.g., `'react'`).
96
+
2.**Prefix match:** If no direct match, check for prefix-based shares (e.g., `'next/'` for `'next/router'`).
97
+
3.**Reconstructed path match:** If enabled, try matching the path after `node_modules` (for relative/absolute imports inside node_modules), first direct, then prefix.
98
+
4.**No match:** Falls back to normal module resolution.
99
+
100
+
- Matching stops at the first match found.
101
+
-`include`/`exclude`, `layer`, and `issuerLayer` filters apply at each step.
102
+
103
+
See `ProvideSharedPlugin.ts` and `ConsumeSharedPlugin.ts` for implementation details.
104
+
86
105
## Layers
87
106
88
107
### `layer`
@@ -348,53 +367,9 @@ In this Next.js-style example:
348
367
349
368
## nodeModulesReconstructedLookup
350
369
351
-
This section covers the nodeModulesReconstructedLookup experiment, which helps with sharing modules that use relative imports internally.
352
-
353
-
Module Federation offers an experimental feature `nodeModulesReconstructedLookup` to solve a common issue with sharing modules that use relative imports internally.
354
-
355
-
### The Problem
370
+
`nodeModulesReconstructedLookup` is now a per-shared-item option in the `shared` configuration. It enables enhanced matching for relative imports inside node_modules for the specific shared item where it is set.
356
371
357
-
When you share a module like `'shared'` and its subpaths like `'shared/directory/'`, Module Federation matches the **import request** against these patterns. However, if your module uses **relative imports** internally, Module Federation can't match them properly:
358
-
359
-
```js
360
-
// shared/index.js
361
-
export*from'./package.json';
362
-
export { defaultasthing } from'./directory/thing'; // This relative import won't match 'shared/directory/'
363
-
```
364
-
365
-
The problem occurs because:
366
-
1. You configure Module Federation to share `'shared'` and `'shared/directory/'`
367
-
2. When code imports `'shared'`, it works fine
368
-
3. But inside `shared/index.js`, there's a relative import `import './directory/thing'`
369
-
4. Module Federation doesn't recognize this as matching `'shared/directory/'` because the import request is `'./directory/thing'` (relative)
370
-
371
-
### The Solution
372
-
373
-
The `nodeModulesReconstructedLookup` experiment solves this by:
console.log(thing); // The correctly shared submodule
433
410
```
434
411
435
-
Without this experiment, the relative import in `shared/index.js` wouldn't be properly shared, potentially leading to duplicate instances of the same module.
436
-
437
-
### When to Use This Feature
438
-
439
-
This feature is particularly useful in scenarios where:
440
-
1. Your shared modules use relative imports internally (e.g., `./directory/thing`)
441
-
2. You're sharing a package that has internal subdirectory imports
442
-
3. Module Federation isn't correctly sharing submodules because the request doesn't match the shared configuration
Copy file name to clipboardExpand all lines: apps/website-new/docs/en/configure/experiments.mdx
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -47,24 +47,24 @@ When using this mode, all entrypoints will initialize asynchronously. If you're
47
47
48
48
## nodeModulesReconstructedLookup
49
49
50
-
- Type: `boolean`
51
-
- Required: No
52
-
- Default: `false`
50
+
-**Type:**`boolean`
51
+
-**Required:** No
52
+
-**Default:**`false`
53
53
54
54
Enables enhanced module resolution for packages located in `node_modules`, particularly for modules that use relative imports internally.
55
55
56
-
**What it solves**: When a shared module uses relative imports (e.g., `import './directory/thing'`), Module Federation might not correctly recognize these as matching your shared configuration. This experiment reconstructs the full path and extracts the proper module name to enable correct sharing.
56
+
**What it solves**: When a shared module uses relative imports (e.g., `import './directory/thing'`), Module Federation might not correctly recognize these as matching your shared configuration. This option reconstructs the full path and extracts the proper module name to enable correct sharing.
57
+
58
+
**How to use:**
59
+
60
+
Set `nodeModulesReconstructedLookup: true` on individual shared items that need this behavior:
Copy file name to clipboardExpand all lines: apps/website-new/docs/en/guide/basic/vite.mdx
+6-1Lines changed: 6 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,16 +1,21 @@
1
1
# Vite Plugin
2
2
3
+
:::tip
4
+
This is a community plugin.
5
+
:::
6
+
3
7
- Can build modules that meet the `Module Federation` loading specifications.
4
8
- Can consume modules that adhere to the `Module Federation` specifications using aliases.
5
9
- Can configure shared dependencies for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
6
10
11
+
7
12
:::warning Unsupported Options
8
13
Except for the [dev、dts](../../configure/dev.html) options, all options are supported
9
14
:::
10
15
- roadmap 🗓️
11
16
- When a module has remote types, it will automatically download and consume the types of the remote modules.
12
17
- Consuming remote modules will have hot update capabilities.
0 commit comments