Skip to content

Commit 6543f15

Browse files
ScriptedAlchemyScriptedAlchemy
committed
chore: use only default share scope
1 parent c327089 commit 6543f15

File tree

22 files changed

+610
-0
lines changed

22 files changed

+610
-0
lines changed

‎apps/module-federation-react-example/host/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "module-federation-react-example-host",
3+
"version": "1.0.0",
4+
"description": "Host application for Module Federation demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack serve",
8+
"build": "webpack --mode production"
9+
},
10+
"dependencies": {
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-router-dom": "^6.15.0"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.22.11",
17+
"@babel/preset-react": "^7.22.5",
18+
"babel-loader": "^9.1.3",
19+
"html-webpack-plugin": "^5.5.3",
20+
"webpack": "^5.88.2",
21+
"webpack-cli": "^5.1.4",
22+
"webpack-dev-server": "^4.15.1"
23+
}
24+
}

‎apps/module-federation-react-example/host/project.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "module-federation-react-example-host",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "apps/module-federation-react-example/host",
5+
"projectType": "application",
6+
"targets": {
7+
"build": {
8+
"executor": "nx:run-commands",
9+
"options": {
10+
"cwd": "apps/module-federation-react-example/host",
11+
"command": "webpack --mode production"
12+
}
13+
},
14+
"serve": {
15+
"executor": "nx:run-commands",
16+
"options": {
17+
"cwd": "apps/module-federation-react-example/host",
18+
"command": "webpack serve"
19+
}
20+
}
21+
},
22+
"tags": []
23+
}

‎apps/module-federation-react-example/host/public/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Module Federation Example</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
</body>
11+
</html>

‎apps/module-federation-react-example/host/share-usage.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"timestamp": "2025-08-26T23:39:55.557Z",
3+
"outputPath": "/Users/bytedance/dev/core/apps/module-federation-react-example/host/dist",
4+
"sharedModules": {
5+
"react": {
6+
"moduleName": "react",
7+
"requiredVersion": "^18.2.0",
8+
"usageCount": 2,
9+
"usedFrom": [
10+
"/src/bootstrap.js",
11+
"/Users/bytedance/dev/core/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.production.js"
12+
]
13+
},
14+
"react-dom": {
15+
"moduleName": "react-dom",
16+
"usageCount": 1,
17+
"usedFrom": [
18+
"/Users/bytedance/dev/core/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-client.production.js"
19+
]
20+
}
21+
},
22+
"unusedSharedModules": []
23+
}

‎apps/module-federation-react-example/host/src/App.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
3+
const App = () => {
4+
const [RemoteButton, setRemoteButton] = React.useState(null);
5+
const [RemoteApp, setRemoteApp] = React.useState(null);
6+
7+
React.useEffect(() => {
8+
// Dynamically load the remote components
9+
import('remote/Button')
10+
.then((module) => {
11+
setRemoteButton(() => module.default);
12+
})
13+
.catch((err) => console.error('Error loading remote button:', err));
14+
15+
import('remote/App')
16+
.then((module) => {
17+
setRemoteApp(() => module.default);
18+
})
19+
.catch((err) => console.error('Error loading remote app:', err));
20+
}, []);
21+
22+
return (
23+
<div>
24+
<h1>Host Application</h1>
25+
<p>This is the host application that consumes shared components.</p>
26+
27+
{RemoteButton ? (
28+
<div>
29+
<h2>Remote Button Component:</h2>
30+
<RemoteButton />
31+
</div>
32+
) : (
33+
<p>Loading remote button...</p>
34+
)}
35+
36+
{RemoteApp ? (
37+
<div>
38+
<h2>Remote App Component:</h2>
39+
<RemoteApp />
40+
</div>
41+
) : (
42+
<p>Loading remote app...</p>
43+
)}
44+
</div>
45+
);
46+
};
47+
48+
export default App;

‎apps/module-federation-react-example/host/src/bootstrap.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import App from './App';
4+
5+
const container = document.getElementById('root');
6+
const root = createRoot(container);
7+
root.render(<App />);

‎apps/module-federation-react-example/host/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import('./bootstrap');

‎apps/module-federation-react-example/host/webpack.config.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const HtmlWebpackPlugin = require('html-webpack-plugin');
2+
const {
3+
ModuleFederationPlugin,
4+
ShareUsagePlugin,
5+
} = require('@module-federation/enhanced');
6+
const path = require('path');
7+
8+
module.exports = {
9+
entry: './src/index',
10+
mode: 'development',
11+
devServer: {
12+
static: {
13+
directory: path.join(__dirname, 'dist'),
14+
},
15+
port: 3001,
16+
},
17+
output: {
18+
publicPath: 'auto',
19+
},
20+
module: {
21+
rules: [
22+
{
23+
test: /\.jsx?$/,
24+
loader: 'babel-loader',
25+
exclude: /node_modules/,
26+
options: {
27+
presets: ['@babel/preset-react'],
28+
},
29+
},
30+
],
31+
},
32+
plugins: [
33+
new ModuleFederationPlugin({
34+
name: 'host',
35+
filename: 'remoteEntry.js',
36+
remotes: {
37+
remote: 'remote@http://localhost:3002/remoteEntry.js',
38+
},
39+
shared: {
40+
react: { singleton: true },
41+
'react-dom': { singleton: true },
42+
'react-router-dom': { singleton: true },
43+
},
44+
}),
45+
// Add ShareUsagePlugin to track usage of shared modules
46+
// Uncomment once the build issues are fixed
47+
new ShareUsagePlugin({
48+
outputFile: 'share-usage.json',
49+
includeDetails: true,
50+
includeUnused: true,
51+
}),
52+
new HtmlWebpackPlugin({
53+
template: './public/index.html',
54+
}),
55+
],
56+
};

‎apps/module-federation-react-example/project.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "module-federation-react-example",
3+
"$schema": "../node_modules/nx/schemas/project-schema.json",
4+
"sourceRoot": "apps/module-federation-react-example",
5+
"projectType": "application",
6+
"targets": {
7+
"build": {
8+
"executor": "nx:run-commands",
9+
"options": {
10+
"commands": [
11+
{
12+
"command": "nx run module-federation-react-example-remote:build"
13+
},
14+
{
15+
"command": "nx run module-federation-react-example-host:build"
16+
}
17+
],
18+
"parallel": false
19+
}
20+
},
21+
"serve": {
22+
"executor": "nx:run-commands",
23+
"options": {
24+
"commands": [
25+
{
26+
"command": "nx run module-federation-react-example-remote:serve"
27+
},
28+
{
29+
"command": "nx run module-federation-react-example-host:serve"
30+
}
31+
],
32+
"parallel": true
33+
}
34+
}
35+
},
36+
"tags": []
37+
}

‎apps/module-federation-react-example/remote/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "module-federation-react-example-remote",
3+
"version": "1.0.0",
4+
"description": "Remote application for Module Federation demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack serve",
8+
"build": "webpack --mode production"
9+
},
10+
"dependencies": {
11+
"react": "^18.2.0",
12+
"react-dom": "^18.2.0",
13+
"react-router-dom": "^6.15.0"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.22.11",
17+
"@babel/preset-react": "^7.22.5",
18+
"babel-loader": "^9.1.3",
19+
"html-webpack-plugin": "^5.5.3",
20+
"webpack": "^5.88.2",
21+
"webpack-cli": "^5.1.4",
22+
"webpack-dev-server": "^4.15.1"
23+
}
24+
}

0 commit comments

Comments
 (0)