diff --git a/error-boundary/README.md b/error-boundary/README.md
new file mode 100644
index 00000000000..794c7bed52a
--- /dev/null
+++ b/error-boundary/README.md
@@ -0,0 +1,4 @@
+# Error Boundary
+
+This demo boots only app1, app2 remains offline.
+Loading localhost:3001 will render a error message from the runtime plugin as a react module when the container if offline.
diff --git a/error-boundary/app1/package.json b/error-boundary/app1/package.json
new file mode 100644
index 00000000000..392d12c0714
--- /dev/null
+++ b/error-boundary/app1/package.json
@@ -0,0 +1,32 @@
+{
+ "name": "error-boundary_app1",
+ "version": "0.0.0",
+ "devDependencies": {
+ "@babel/core": "7.24.7",
+ "@babel/preset-react": "7.24.7",
+ "babel-loader": "9.1.3",
+ "html-webpack-plugin": "5.6.0",
+ "serve": "14.2.3",
+ "@rspack/core": "1.4.11",
+ "@rspack/cli": "1.4.11",
+ "@rspack/dev-server": "1.1.3",
+ "webpack": "5.101.0",
+ "webpack-cli": "5.1.4",
+ "webpack-dev-server": "5.1.0",
+ "@module-federation/runtime": "0.17.1",
+ "@module-federation/enhanced": "0.17.1"
+ },
+ "scripts": {
+ "start": "rspack serve -c rspack.config.js",
+ "build": "rspack build --mode production -c rspack.config.js",
+ "legacy:start": "webpack serve --config webpack.config.js",
+ "legacy:build": "webpack --config webpack.config.js --mode production",
+ "serve": "serve dist -p 3001",
+ "clean": "rm -rf dist"
+ },
+ "dependencies": {
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "lodash": "^4.17.21"
+ }
+}
\ No newline at end of file
diff --git a/error-boundary/app1/public/index.html b/error-boundary/app1/public/index.html
new file mode 100644
index 00000000000..e7a195eac0d
--- /dev/null
+++ b/error-boundary/app1/public/index.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/error-boundary/app1/rspack.config.js b/error-boundary/app1/rspack.config.js
new file mode 100644
index 00000000000..e8ebdafe1fe
--- /dev/null
+++ b/error-boundary/app1/rspack.config.js
@@ -0,0 +1,101 @@
+const {
+ HtmlRspackPlugin,
+ container: { ModuleFederationPlugin },
+} = require('@rspack/core');
+const path = require('path');
+
+// adds all your dependencies as shared modules
+// version is inferred from package.json in the dependencies
+// requiredVersion is used from your package.json
+// dependencies will automatically use the highest available package
+// in the federated app, based on version requirement in package.json
+// multiple different versions might coexist in the federated app
+// Note that this will not affect nested paths like "lodash/pluck"
+// Note that this will disable some optimization on these packages
+// with might lead the bundle size problems
+const deps = require('./package.json').dependencies;
+
+module.exports = {
+ entry: './src/index',
+ mode: 'development',
+ devServer: {
+ static: {
+ directory: path.join(__dirname, 'dist'),
+ },
+ hot: true,
+ port: 3001,
+ liveReload: true,
+ },
+ target: 'web',
+ output: {
+ publicPath: 'auto',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ include: path.resolve(__dirname, 'src'),
+ use: {
+ loader: 'builtin:swc-loader',
+ options: {
+ jsc: {
+ parser: {
+ syntax: 'ecmascript',
+ jsx: true,
+ },
+ transform: {
+ react: {
+ runtime: 'automatic',
+ },
+ },
+ },
+ },
+ },
+ },
+ {
+ test: /\.ts$/,
+ use: {
+ loader: 'builtin:swc-loader',
+ options: {
+ jsc: {
+ parser: {
+ syntax: 'typescript',
+ jsx: true,
+ },
+ transform: {
+ react: {
+ runtime: 'automatic',
+ },
+ },
+ },
+ },
+ },
+ },
+ ],
+ },
+ plugins: [
+ new ModuleFederationPlugin({
+ name: 'app1',
+ filename: 'remoteEntry.js',
+ remotes: {
+ app2: 'app2@http://localhost:3002/remoteEntry.js',
+ },
+ exposes: {
+ './Button': './src/Button',
+ },
+ shared: {
+ ...deps,
+ react: {
+ singleton: true,
+ },
+ 'react-dom': {
+ singleton: true,
+ },
+ lodash: {},
+ },
+ }),
+ new HtmlRspackPlugin({
+ template: './public/index.html',
+ }),
+ ],
+};
diff --git a/error-boundary/app1/src/App.js b/error-boundary/app1/src/App.js
new file mode 100644
index 00000000000..2cfb8e09752
--- /dev/null
+++ b/error-boundary/app1/src/App.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import lodash from 'lodash';
+
+import LocalButton from './Button';
+const RemoteButtonLazy = React.lazy(() => import('app2/Button'));
+
+// A function to generate a color from a string
+const getColorFromString = str => {
+ // Prime numbers used for generating a hash
+ let primes = [1, 2, 3, 5, 7, 11, 13, 17, 19, 23];
+ let hash = 0;
+
+ // Generate a hash from the string
+ for (let i = 0; i < str.length; i++) {
+ hash += str.charCodeAt(i) * primes[i % primes.length];
+ }
+
+ // Convert the hash to a color
+ let color = '#';
+ for (let i = 0; i < 3; i++) {
+ const value = (hash >> (i * 8)) & 0xff;
+ color += ('00' + value.toString(16)).substr(-2);
+ }
+
+ return color;
+};
+
+// The main App component
+const App = () => (
+
+
Offline Remote
+
Remotes currently in use
+ {/* Display the names of the remotes loaded by the CustomPlugin */}
+ {__FEDERATION__.__INSTANCES__.map(inst => (
+
+ {inst.name}
+
+ ))}
+
+ Click The second button. This will cause the pick-remote.ts to load remoteEntry urls
+ from a mock api call.
+
+ {/* LocalButton is a button component from the local app */}
+
+ {/* RemoteButton is a button component loaded from a remote app */}
+
+
+
+
+
+ {/* The Reset button clears the 'button' item from localStorage */}
+
+