hosekeeping apollo

apollo-client/app1/config/module-federation.js

@@ -1,63 +1,39 @@
 const deps = require('../package.json').dependencies;
-const { ModuleFederationPlugin } = require('@module-federation/enhanced');
-const rspack = require('@rspack/core')
 
-module.exports = (FederationPlugin)=> {
-//   let FederationPlugin;
-//   if(type === 'rspack') {
-// FederationPlugin = rspack.container.ModuleFederationPlugin
-//   } else if(type === 'uni')
-  return {
+const sharedDependencies = {
+  react: { requiredVersion: deps.react, eager: true },
+  'react-dom': deps['react-dom'],
+  graphql: { requiredVersion: deps.graphql, eager: true },
+  '@apollo/client': {
+    eager: true,
+    singleton: true,
+    requiredVersion: deps['@apollo/client'],
+  },
+  'node-fetch': deps['node-fetch'],
+  'serialize-javascript': deps['serialize-javascript'],
+};
+
+module.exports = (FederationPlugin) => ({
   client: new FederationPlugin({
     remoteType: 'script',
     name: 'app1',
     filename: 'remoteEntry.js',
     remotes: {
       app2: 'app2@http://localhost:3001/static/remoteEntry.js',
     },
-    shared: [
-      {
-        react: {requiredVersion: deps.react, eager: true},
-        'react-dom': deps['react-dom'],
-        graphql: {requiredVersion: deps.graphql, eager: true},
-        '@apollo/client': {
-          eager: true,
-          singleton: true,
-          requiredVersion: deps['@apollo/client'],
-        },
-        'node-fetch': deps['node-fetch'],
-        'serialize-javascript': deps['serialize-javascript'],
-      },
-    ],
+    shared: sharedDependencies,
   }),
-    server
-:
-  [
+  server: [
     new FederationPlugin({
       remoteType: 'script',
-      isServer: true,
       name: 'app1',
-      library: {type: 'commonjs-module'},
+      library: { type: 'commonjs-module', name: 'app1' },
       filename: 'remoteEntry.js',
       remotes: {
         app2: 'app2@http://localhost:3001/server/remoteEntry.js',
       },
       runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],
-      shared: [
-        {
-          react: {requiredVersion: deps.react, eager: true},
-          'react-dom': deps['react-dom'],
-          graphql: {requiredVersion: deps.graphql, eager: true},
-          '@apollo/client': {
-            eager: true,
-            singleton: true,
-            requiredVersion: deps['@apollo/client'],
-          },
-          'node-fetch': deps['node-fetch'],
-          'serialize-javascript': deps['serialize-javascript'],
-        },
-      ],
+      shared: sharedDependencies,
     }),
-  ]
-}
-}
+  ],
+});

apollo-client/app1/config/rspack.client.js

@@ -1,8 +1,8 @@
 const path = require('path');
 const { merge } = require('webpack-merge');
-const shared = require('./webpack.shared');
-const rspack = require('@rspack/core')
-const moduleFederationPlugin = require('./module-federation');
+const sharedConfig = require('./webpack.shared');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
+const getModuleFederationPlugin = require('./module-federation');
 
 /**
  * @type {import('webpack').Configuration}
@@ -19,7 +19,7 @@ const webpackConfig = {
     chunkFilename: '[name].js',
     publicPath: 'http://localhost:3000/static/',
   },
-  plugins: [moduleFederationPlugin(rspack.container.ModuleFederationPlugin).client],
+  plugins: [getModuleFederationPlugin(ModuleFederationPlugin).client],
 };
 
-module.exports = merge(shared, webpackConfig);
+module.exports = merge(sharedConfig, webpackConfig);

apollo-client/app1/config/rspack.server.js

@@ -1,8 +1,8 @@
 const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
-const moduleFederationPlugin = require('./module-federation');
-const rspack = require('@rspack/core');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
+const getModuleFederationPlugin = require('./module-federation');
 
 /**
  * @type {import('webpack').Configuration}
@@ -14,14 +14,16 @@ const webpackConfig = {
   output: {
     path: path.resolve(__dirname, '../dist/server'),
     filename: '[name].js',
+    chunkFilename: '[name]-[contenthash].js',
     libraryTarget: 'commonjs-module',
   },
   externals: ['express'],
   mode: 'production',
-  plugins: [...moduleFederationPlugin(rspack.container.ModuleFederationPlugin).server],
+  plugins: [...getModuleFederationPlugin(ModuleFederationPlugin).server],
   stats: {
     colors: true,
   },
 };
 
 module.exports = merge(shared, webpackConfig);
+

apollo-client/app1/config/webpack.client.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
 const moduleFederationPlugin = require('./module-federation');
-const { ModuleFederationPlugin } = require('@module-federation/enhanced');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 
 /**
  * @type {import('webpack').Configuration}

apollo-client/app1/config/webpack.server.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
 const moduleFederationPlugin = require('./module-federation');
-const { UniversalFederationPlugin } = require('@module-federation/node');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 
 /**
  * @type {import('webpack').Configuration}
@@ -13,12 +13,12 @@ const webpackConfig = {
   entry: ['@babel/polyfill', path.resolve(__dirname, '../src/server/index')],
   output: {
     path: path.resolve(__dirname, '../dist/server'),
-    filename: '[name].js',
+    filename: '[name]-[contenthash].js',
     libraryTarget: 'commonjs-module',
   },
   externals: ['express'],
   mode: 'production',
-  plugins: [...moduleFederationPlugin(UniversalFederationPlugin).server],
+  plugins: [...moduleFederationPlugin(ModuleFederationPlugin).server],
   stats: {
     colors: true,
   },

apollo-client/app1/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "legacy:start": "pnpm legacy:build && pnpm serve",
-    "serve": "node dist/server/main.js",
+    "start": "pnpm build && pnpm serve",
+    "serve": "wait-on tcp:3002 && node dist/server/main.js",
     "legacy:build": "pnpm build:server:legacy && pnpm build:client:legacy",
     "build": "pnpm build:server && pnpm build:client",
     "build:client:legacy": "rimraf dist/client && webpack --mode production --progress --config config/webpack.client.js",
@@ -41,8 +42,8 @@
     "webpack": "5.91.0",
     "webpack-cli": "4.10.0",
     "webpack-merge": "5.10.0",
-    "@rspack/core": "0.6.5",
-    "@rspack/cli": "0.6.5",
-    "@rspack/dev-server": "0.6.5"
+    "@rspack/core": "0.7.0-beta.0",
+    "@rspack/cli": "0.7.0-beta.0",
+    "@rspack/dev-server": "0.7.0-beta.0"
   }
-}
+}

apollo-client/app1/src/client/components/App.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import type { PokemonListProps } from 'app2/PokemonList';
 
+
+console.log(import('app2/PokemonList'));
 const PokemonList = React.lazy(
   () => import('app2/PokemonList') as Promise<{ default: React.FC<PokemonListProps> }>,
 );

apollo-client/app1/src/server/render.tsx

@@ -2,14 +2,13 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { ApolloProvider } from '@apollo/client';
 import { renderToStringWithData } from '@apollo/client/react/ssr';
-// import { renderToStaticMarkup } from 'react-dom/server';
 import serialize from 'serialize-javascript';
-import fetch from 'node-fetch';
 
 import App from '../client/components/App';
 import { createApolloClient } from '../client/apolloClient';
 
 export default async (req, res, next) => {
+  const fetch = (await import('node-fetch')).default
   const helmet = Helmet.renderStatic();
 
   const { apolloClient } = createApolloClient({
@@ -47,3 +46,4 @@ export default async (req, res, next) => {
   res.write('</body></html>');
   res.send();
 };
+

apollo-client/app2/config/module-federation.js

@@ -27,10 +27,9 @@ module.exports = (FederationPlugin) => {
     server: [
       new FederationPlugin({
         remoteType: 'script',
-        isServer: true,
         runtimePlugins:[require.resolve('@module-federation/node/runtimePlugin')],
         name: 'app2',
-        library: {type: 'commonjs-module'},
+        library: {type: 'commonjs-module',name: 'app2'},
         filename: 'remoteEntry.js',
         exposes: {
           './PokemonList': './src/client/components/PokemonList',

apollo-client/app2/config/rspack.client.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
-const rspack = require('@rspack/core')
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 const moduleFederationPlugin = require('./module-federation');
 
 /**
@@ -19,7 +19,7 @@ const webpackConfig = {
     chunkFilename: '[name].js',
     publicPath: 'http://localhost:3001/static/',
   },
-  plugins: [moduleFederationPlugin(rspack.container.ModuleFederationPlugin).client],
+  plugins: [moduleFederationPlugin(ModuleFederationPlugin).client],
 };
 
 module.exports = merge(shared, webpackConfig);

apollo-client/app2/config/rspack.server.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
 const moduleFederationPlugin = require('./module-federation');
-const rspack = require('@rspack/core');
+const {ModuleFederationPlugin} = require('@module-federation/enhanced/rspack')
 
 /**
  * @type {import('webpack').Configuration}
@@ -18,7 +18,7 @@ const webpackConfig = {
   },
   externals: ['express'],
   mode: 'production',
-  plugins: [...moduleFederationPlugin(rspack.container.ModuleFederationPlugin).server],
+  plugins: [...moduleFederationPlugin(ModuleFederationPlugin).server],
   stats: {
     colors: true,
   },

apollo-client/app2/config/webpack.client.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
 const moduleFederationPlugin = require('./module-federation');
-const { ModuleFederationPlugin } = require('@module-federation/enhanced');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 
 /**
  * @type {import('webpack').Configuration}

apollo-client/app2/config/webpack.server.js

@@ -2,7 +2,7 @@ const path = require('path');
 const { merge } = require('webpack-merge');
 const shared = require('./webpack.shared');
 const moduleFederationPlugin = require('./module-federation');
-const { UniversalFederationPlugin } = require('@module-federation/node');
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/webpack');
 
 /**
  * @type {import('webpack').Configuration}
@@ -18,7 +18,7 @@ const webpackConfig = {
   },
   externals: ['express'],
   mode: 'production',
-  plugins: [...moduleFederationPlugin(UniversalFederationPlugin).server],
+  plugins: [...moduleFederationPlugin(ModuleFederationPlugin).server],
   stats: {
     colors: true,
   },

apollo-client/app2/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "scripts": {
     "legacy:start": "pnpm legacy:build && pnpm serve",
-    "serve": "node dist/server/main.js",
+    "start": "pnpm build && pnpm serve",
+    "serve": "sleep 3 && node dist/server/main.js",
     "legacy:build": "pnpm build:server:legacy && pnpm build:client:legacy",
     "build": "pnpm build:server && pnpm build:client",
     "build:client:legacy": "rimraf dist/client && webpack --mode production --progress --config config/webpack.client.js",
@@ -41,8 +42,8 @@
     "webpack": "5.91.0",
     "webpack-cli": "4.10.0",
     "webpack-merge": "5.10.0",
-    "@rspack/core": "0.6.5",
-    "@rspack/cli": "0.6.5",
-    "@rspack/dev-server": "0.6.5"
+    "@rspack/core": "0.7.0-beta.0",
+    "@rspack/cli": "0.7.0-beta.0",
+    "@rspack/dev-server": "0.7.0-beta.0"
   }
-}
+}

apollo-client/package.json

@@ -1,18 +1,18 @@
 {
   "name": "apollo-client",
-  "description": "This example demonstrates using Apollo Client with Module Federation.",
+  "description": "Example demonstrating Apollo Client with Module Federation.",
   "version": "0.0.0",
   "scripts": {
     "legacy:start": "pnpm --filter apollo-client_* --parallel legacy:start",
     "legacy:build": "pnpm --filter apollo-client_* --parallel legacy:build",
     "start": "pnpm --filter apollo-client_* --parallel start",
     "serve": "pnpm --filter apollo-client_* --parallel serve",
     "build": "pnpm --filter apollo-client_* --parallel build",
-    "e2e:ci": "pnpm build && pnpm serve & sleep 2 && wait-on tcp:3000 && wait-on tcp:3001 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
-    "legacy:e2e:ci": "kill-port 3000 && kill-port 3001 && pnpm legacy:build && pnpm serve & sleep 20 && wait-on tcp:3000 && wait-on tcp:3001 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
+    "e2e:ci": "pnpm build && pnpm serve & sleep 30 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
+    "legacy:e2e:ci": "kill-port 3000 && kill-port 3001 && pnpm legacy:build && pnpm serve & sleep 60 && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
   },
   "devDependencies": {
-    "wait-on": "7.2.0",
-    "kill-port": "2.0.1"
+    "wait-on": "^7.2.0",
+    "kill-port": "^2.0.1"
   }
 }