Skip to content

Commit 221b7df

Browse files
ScriptedAlchemyScriptedAlchemy
committed
Merge branch 'main' into duplicate-link
# Conflicts: # package.json
2 parents f5bd3c3 + cdd39e8 commit 221b7df

File tree

125 files changed

+718
-1358
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

125 files changed

+718
-1358
lines changed

‎.changeset/ai-noisy-wolf.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@module-federation/cli": patch
3+
---
4+
5+
Improve dynamic module import for `readConfig` function to use file URL format.
6+
7+
- Added `pathToFileURL` import from 'url' module.
8+
- Updated the dynamic import statement for `mfConfig` to use `pathToFileURL(preBundlePath).href`.
9+
- Ensures compatibility and correctness in environments where file paths require URL format.
10+
```

‎.changeset/green-crews-melt.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@module-federation/node': patch
3+
---
4+
5+
fix: remove chunks from installedChunks on fail to enable retries

‎.changeset/plenty-birds-heal.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@module-federation/bridge-react': patch
3+
---
4+
5+
feat: add error detection for react v19 under the default export createBaseBridgeComponent

‎.changeset/wise-ways-occur.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@module-federation/bridge-react': patch
3+
'website-new': patch
4+
---
5+
6+
refactor(bridge-react): modify the default mode of the bridge to legacy mode to reduce redundant code

‎apps/router-demo/router-remote1-2001/src/export-App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import App from './App';
3-
import { createBridgeComponent } from '@module-federation/bridge-react/legacy';
3+
import { createBridgeComponent } from '@module-federation/bridge-react';
44

55
const provider = createBridgeComponent({
66
rootComponent: App,

‎apps/website-new/docs/en/guide/start/quick-start.mdx

Lines changed: 2 additions & 274 deletions
Original file line numberDiff line numberDiff line change
@@ -162,281 +162,9 @@ export default createModuleFederationConfig({
162162
163163
```
164164
165-
## Create from existing project
165+
## Existing project integration
166166
167-
### Creating a Producer
168-
169-
#### 1. Initializing the Project
170-
171-
Use [Rsbuild](https://rsbuild.dev/) to create a provider and call the following command:
172-
173-
<PackageManagerTabs
174-
command={{
175-
npm: 'npm create rsbuild@latest',
176-
yarn: 'yarn create rsbuild',
177-
pnpm: 'pnpm create rsbuild@latest',
178-
bun: 'bun create rsbuild@latest',
179-
}}
180-
/>
181-
182-
183-
> Complete the project creation according to the prompts.
184-
185-
```bash
186-
? Input target folder -> federation_provider
187-
? Select framework -> React
188-
? Select language -> TypeScript
189-
```
190-
191-
#### 2. Installing Module Federation Build Plugin
192-
193-
Following the steps above for initializing the project, we created a `React` project named `federation_provider`. Execute the following commands in sequence:
194-
195-
<PackageManagerTabs
196-
command={{
197-
npm: `
198-
cd federation_provider
199-
npm add @module-federation/enhanced
200-
npm add @module-federation/rsbuild-plugin --save-dev
201-
`,
202-
yarn: `
203-
cd federation_provider
204-
yarn add @module-federation/enhanced
205-
yarn add @module-federation/rsbuild-plugin --save-dev
206-
`,
207-
pnpm: `
208-
cd federation_provider
209-
pnpm add @module-federation/enhanced
210-
pnpm add @module-federation/rsbuild-plugin --save-dev
211-
`,
212-
bun: `
213-
cd federation_provider
214-
bun add @module-federation/enhanced
215-
bun add @module-federation/rsbuild-plugin --save-dev
216-
`,
217-
}}
218-
/>
219-
220-
#### 3. Exporting Modules by the Producer
221-
222-
> Change the entry file to asynchronous
223-
224-
225-
```tsx
226-
// Move src/index.tsx to a newly created src/bootstrap.tsx file
227-
// src/index.tsx
228-
import('./bootstrap');
229-
230-
// src/bootstrap.tsx
231-
import React from 'react';
232-
import ReactDOM from 'react-dom/client';
233-
import App from './App';
234-
235-
const root = ReactDOM.createRoot(document.getElementById('root')!);
236-
root.render(
237-
<React.StrictMode>
238-
<App />
239-
</React.StrictMode>,
240-
);
241-
```
242-
243-
> Add a Button Component
244-
245-
```tsx
246-
// src/button.tsx
247-
export default function Button() {
248-
return <div>Provider button</div>;
249-
}
250-
```
251-
252-
> Export the Button component through Module Federation
253-
254-
```typescript title="rsbuild.config.ts"
255-
import { defineConfig } from '@rsbuild/core';
256-
import { pluginReact } from '@rsbuild/plugin-react';
257-
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
258-
259-
export default defineConfig({
260-
plugins: [
261-
pluginReact(),
262-
pluginModuleFederation({
263-
name: 'federation_provider',
264-
exposes: {
265-
'./button': './src/button.tsx',
266-
},
267-
shared: ['react', 'react-dom'],
268-
}),
269-
],
270-
server: {
271-
port: 3000,
272-
},
273-
});
274-
```
275-
276-
#### 4. Starting the Producer
277-
278-
<PackageManagerTabs
279-
command={{
280-
npm: `npm run dev`,
281-
yarn: `yarn run dev`,
282-
pnpm: `pnpm run dev`,
283-
bun: `bun run dev`,
284-
}}
285-
/>
286-
287-
```zsh
288-
➜ federation_provider npm run dev
289-
290-
> [email protected] dev
291-
> rsbuild dev --open
292-
293-
Rsbuild v0.5.1
294-
295-
> Local: http://localhost:3000/
296-
> Network: http://10.94.55.204:3000/
297-
> Network: http://10.4.255.21:3000/
298-
299-
start Compiling...
300-
[ Module Federation Manifest Plugin ] Manifest Link: http://localhost:3000/mf-manifest.json
301-
```
302-
303-
After the project starts, the `Manifest Link: http://localhost:3000/mf-manifest.json` message appears, which is the manifest information link for Module Federation.
304-
305-
### Creating a Consumer
306-
307-
#### 1. Initializing the Project
308-
309-
Use [Rsbuild](https://rsbuild.dev/) to create a consumer and call the following command:
310-
311-
<PackageManagerTabs
312-
command={{
313-
npm: 'npm create rsbuild@latest',
314-
yarn: 'yarn create rsbuild',
315-
pnpm: 'pnpm create rsbuild@latest',
316-
bun: 'bun create rsbuild@latest',
317-
}}
318-
/>
319-
320-
321-
> Complete the project creation according to the prompts.
322-
323-
```bash
324-
? Input target folder -> federation_consumer
325-
? Select framework -> React
326-
? Select language -> TypeScript
327-
```
328-
329-
#### 2. Installing Module Federation Build Plugin
330-
331-
Following the steps above for initializing the project, we created a `React` project named `federation_consumer`. Execute the following commands in sequence:
332-
333-
<PackageManagerTabs
334-
command={{
335-
npm: `
336-
cd federation_consumer
337-
npm add @module-federation/enhanced
338-
npm add @module-federation/rsbuild-plugin --save-dev
339-
`,
340-
yarn: `
341-
cd federation_consumer
342-
yarn add @module-federation/enhanced
343-
yarn add @module-federation/rsbuild-plugin --save-dev
344-
`,
345-
pnpm: `
346-
cd federation_consumer
347-
pnpm add @module-federation/enhanced
348-
pnpm add @module-federation/rsbuild-plugin --save-dev
349-
`,
350-
bun: `
351-
cd federation_consumer
352-
bun add @module-federation/enhanced
353-
bun add @module-federation/rsbuild-plugin --save-dev
354-
`,
355-
}}
356-
/>
357-
358-
359-
#### 3. Consuming the Producer
360-
361-
> Declare the `Module Federation` type path in `tsconfig.json`
362-
363-
```json
364-
{
365-
"compilerOptions": {
366-
"paths":{
367-
"*": ["./@mf-types/*"]
368-
}
369-
}
370-
}
371-
````
372-
373-
374-
> Add Module Federation plugin to consume remote modules
375-
376-
```typescript title="rsbuild.config.ts"
377-
import { defineConfig } from '@rsbuild/core';
378-
import { pluginReact } from '@rsbuild/plugin-react';
379-
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
380-
381-
export default defineConfig({
382-
plugins: [
383-
pluginReact(),
384-
pluginModuleFederation({
385-
name: 'federation_consumer',
386-
remotes: {
387-
federation_provider:
388-
'federation_provider@http://localhost:3000/mf-manifest.json',
389-
},
390-
shared: ['react', 'react-dom'],
391-
}),
392-
],
393-
server: {
394-
port: 2000,
395-
},
396-
});
397-
```
398-
399-
> Change the entry to be asynchronous
400-
401-
```tsx
402-
// Move src/index.tsx to a newly created src/bootstrap.tsx file
403-
// src/index.tsx
404-
import('./bootstrap');
405-
406-
// src/bootstrap.tsx
407-
import React from 'react';
408-
import ReactDOM from 'react-dom/client';
409-
import App from './App';
410-
411-
const root = ReactDOM.createRoot(document.getElementById('root')!);
412-
root.render(
413-
<React.StrictMode>
414-
<App />
415-
</React.StrictMode>,
416-
);
417-
```
418-
419-
> Reference the remote module
420-
421-
```tsx
422-
import './App.css';
423-
// The remote component provided by federation_provider
424-
import ProviderButton from 'federation_provider/button';
425-
426-
const App = () => {
427-
return (
428-
<div className="content">
429-
<h1>Rsbuild with React</h1>
430-
<p>Start building amazing things with Rsbuild.</p>
431-
<div>
432-
<ProviderButton />
433-
</div>
434-
</div>
435-
);
436-
};
437-
438-
export default App;
439-
```
167+
If you want to integrate `Module Federation` into an existing project, you can refer to [docs](../../practice/frameworks/index).
440168
441169
## Summary
442170

‎apps/website-new/docs/en/practice/bridge/react-bridge.mdx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,14 @@
1616

1717
You can choose specific import paths based on the React version used in your project:
1818

19-
```jsx
20-
// Auto-detect React version (recommended for most scenarios)
19+
```tsx
20+
// Explicitly specify React 16/17 version (recommended for React 16/17)
2121
import { createBridgeComponent } from '@module-federation/bridge-react';
2222

23-
// Explicitly specify React 16/17 version (Legacy mode)
24-
import { createBridgeComponent } from '@module-federation/bridge-react/legacy';
25-
26-
// Explicitly specify React 18 version
23+
// Explicitly specify React 18 version (recommended for React 18)
2724
import { createBridgeComponent } from '@module-federation/bridge-react/v18';
2825

29-
// Explicitly specify React 19 version
26+
// Explicitly specify React 19 version (recommended for React 19)
3027
import { createBridgeComponent } from '@module-federation/bridge-react/v19';
3128
```
3229

0 commit comments

Comments
 (0)