fix: clean up next app configs

apps/3000-home/cypress.config.ts

@@ -3,4 +3,5 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 20000,
 });

apps/3000-home/cypress/e2e/app.cy.ts

@@ -32,13 +32,16 @@ describe('3000-home/', () => {
 
   describe('Routing checks', () => {
     it('check that clicking back and forwards in client side routeing still renders the content correctly', () => {
+      cy.visit('/');
       cy.visit('/shop');
       cy.url().should('include', '/shop');
       getH1().contains('Shop Page');
+      cy.wait(300);
       cy.get('.home-menu-link').click();
       //eslint-disable-next-line
-      cy.wait(2999);
+      cy.wait(5000);
       cy.url().should('include', '/');
+      cy.wait(300);
       getH1().contains('This is SPA combined');
     });
   });

apps/3000-home/next.config.js

@@ -44,9 +44,6 @@ try {
 } catch (e) {
   /* empty */
 }
-const {
-  createDelegatedModule,
-} = require('@module-federation/nextjs-mf/utilities');
 
 /**
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
@@ -59,14 +56,27 @@ const nextConfig = {
   },
   webpack(config, options) {
     const { isServer } = options;
-    // used for testing build output snapshots
 
     const remotes = {
-      shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
-        remote: `shop@http://localhost:3001/_next/static/${
-          isServer ? 'ssr' : 'chunks'
-        }/remoteEntry.js`,
-      }),
+      // shop:   {
+      //   name: 'shop',
+      //   alias: 'shop',
+      //   entry: `http://localhost:3001/_next/static/${
+      //     isServer ? 'ssr' : 'chunks'
+      //   }/remoteEntry.js`,
+      // },
+      // checkout:   {
+      //   name: 'checkout',
+      //   alias: 'checkout',
+      //   entry: `http://localhost:3002/_next/static/${
+      //     isServer ? 'ssr' : 'chunks'
+      //   }/remoteEntry.js`,
+      // },
+      // shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
+      //   remote: `shop@http://localhost:3001/_next/static/${
+      //     isServer ? 'ssr' : 'chunks'
+      //   }/remoteEntry.js`,
+      // }),
       // checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
       //   remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
       // }),
@@ -77,6 +87,9 @@ const nextConfig = {
       checkout: `checkout@http://localhost:3002/_next/static/${
         isServer ? 'ssr' : 'chunks'
       }/remoteEntry.js`,
+      shop: `shop@http://localhost:3001/_next/static/${
+        isServer ? 'ssr' : 'chunks'
+      }/remoteEntry.js`,
     };
 
     config.plugins.push(

apps/3000-home/pages/_app.tsx

@@ -3,8 +3,7 @@ import { useState } from 'react';
 import App from 'next/app';
 import { Layout, version } from 'antd';
 import Router, { useRouter } from 'next/router';
-
-import SharedNav from '../components/SharedNav';
+const SharedNav = React.lazy(() => import('../components/SharedNav'));
 import HostAppMenu from '../components/menu';
 import 'antd/dist/antd.css';
 function MyApp(props) {
@@ -38,7 +37,9 @@ function MyApp(props) {
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <SharedNav />
+      <React.Suspense>
+        <SharedNav />
+      </React.Suspense>
       <Layout>
         <Layout.Sider width={200}>
           <MenuComponent />

apps/3000-home/pages/index.tsx

@@ -76,7 +76,7 @@ const Home = () => {
               Loading remote component (CheckoutTitle) from localhost:3002
               <br />
               <blockquote>
-                dynamic(()=&gt;import(&apos;checkout/CheckoutTitle&apos;))
+                lazy(()=&gt;import(&apos;checkout/CheckoutTitle&apos;))
               </blockquote>
             </td>
             <td>

apps/3001-shop/cypress.config.ts

@@ -3,4 +3,5 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 10000,
 });

apps/3001-shop/cypress/e2e/app.cy.ts

@@ -31,14 +31,20 @@ describe('3001-shop/', () => {
   });
 
   describe('Routing checks', () => {
-    it('check that clicking back and forwards in client side routeing still renders the content correctly', () => {
+    it('check that clicking back and forwards in client-side routing still renders the content correctly', () => {
+      cy.visit('/');
       cy.visit('/shop');
       cy.url().should('include', '/shop');
+      cy.wait(1000);
       getH1().contains('Shop Page');
+      cy.wait(1000);
       cy.get('.home-menu-link').click();
       //eslint-disable-next-line
-      cy.wait(2999);
+      cy.wait(1999);
+      cy.get('.home-menu-link').click();
+      cy.wait(1000);
       cy.url().should('include', '/');
+      cy.wait(1000);
       getH1().contains('This is SPA combined');
     });
   });

apps/3001-shop/next.config.js

@@ -5,9 +5,7 @@ const path = require('path');
 const { registerTsConfigPaths } = require('nx/src/plugins/js/utils/register');
 registerTsConfigPaths(path.join(workspaceRoot, 'tsconfig.tmp.json'));
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
-
-// const { createDelegatedModule } = require('@module-federation/nextjs-mf/utilities');
-
+const fs = require('fs');
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/

apps/3001-shop/pages/_app.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React, { Suspense, useState, lazy } from 'react';
 import App from 'next/app';
-import dynamic from 'next/dynamic';
 import { Layout, version } from 'antd';
 import Router, { useRouter } from 'next/router';
 
 import HostAppMenu from '../components/menu';
 
 import 'antd/dist/antd.css';
 
-const SharedNav = dynamic(() => import('home/SharedNav'), { ssr: true });
+const SharedNav = lazy(() => import('home/SharedNav'));
 
 function MyApp({ Component, pageProps }) {
   const { asPath } = useRouter();
@@ -40,7 +39,9 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <Layout style={{ minHeight: '100vh' }}>
-      <SharedNav />
+      <Suspense fallback={'loading'}>
+        <SharedNav />
+      </Suspense>
       <Layout>
         <Layout.Sider width={200}>
           <MenuComponent />

apps/3001-shop/pages/shop/index.tsx

@@ -45,17 +45,47 @@ const Shop = (props) => {
     </div>
   );
 };
-
 Shop.getInitialProps = async () => {
-  try {
-    return await fetch('https://swapi.dev/api/people/1').then((res) =>
-      res.json(),
-    );
-  } catch (e) {
-    return {
-      apiFail: true,
-    };
-  }
+  const timeout = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+
+  const fetchPromise = fetch('https://swapi.dev/api/people/1').then((res) =>
+    res.json(),
+  );
+
+  const fallback = {
+    name: 'Luke Skywalker',
+    height: '172',
+    mass: '77',
+    hair_color: 'blond',
+    skin_color: 'fair',
+    eye_color: 'blue',
+    birth_year: '19BBY',
+    gender: 'male',
+    homeworld: 'https://swapi.dev/api/planets/1/',
+    films: [
+      'https://swapi.dev/api/films/1/',
+      'https://swapi.dev/api/films/2/',
+      'https://swapi.dev/api/films/3/',
+      'https://swapi.dev/api/films/6/',
+    ],
+    species: [],
+    vehicles: [
+      'https://swapi.dev/api/vehicles/14/',
+      'https://swapi.dev/api/vehicles/30/',
+    ],
+    starships: [
+      'https://swapi.dev/api/starships/12/',
+      'https://swapi.dev/api/starships/22/',
+    ],
+    created: '2014-12-09T13:50:51.644000Z',
+    edited: '2014-12-20T21:17:56.891000Z',
+    url: 'https://swapi.dev/api/people/1/',
+  };
+
+  const timerPromise = timeout(3000).then(() => fallback);
+
+  return Promise.race([fetchPromise, timerPromise]);
 };
 
 export default Shop;

apps/3002-checkout/components/CheckoutTitle.tsx

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
+
 const CheckoutTitle = () => {
   const [hookData, setHookData] = useState('');
 
   useEffect(() => {
     setHookData('with hooks data');
   }, []);
+  console.log('CHECKOUT TITLE Componnet');
 
   return (
     <h3 className="title">

apps/3002-checkout/cypress.config.ts

@@ -3,4 +3,5 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 15000,
 });

apps/3002-checkout/cypress/e2e/app.cy.ts

@@ -31,14 +31,17 @@ describe('3002-checkout/', () => {
   });
 
   describe('Routing checks', () => {
-    it('check that clicking back and forwards in client side routeing still renders the content correctly', () => {
+    it('check that clicking back and forwards in client-side routing still renders the content correctly', () => {
+      cy.visit('/checkout');
+      cy.visit('/');
       cy.visit('/checkout');
       cy.url().should('include', '/checkout');
       getH1().contains('checkout page');
+      cy.wait(1000);
       cy.get('.home-menu-link').click();
-      //eslint-disable-next-line
-      cy.wait(2999);
+      cy.wait(8000);
       cy.url().should('include', '/');
+      cy.wait(2000);
       getH1().contains('This is SPA combined');
     });
   });

apps/3002-checkout/next.config.js

@@ -19,7 +19,6 @@ const nextConfig = {
   },
   webpack(config, options) {
     const { isServer } = options;
-
     config.plugins.push(
       new NextFederationPlugin({
         name: 'checkout',

apps/3002-checkout/pages/_app.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Suspense, lazy, useState } from 'react';
 import App from 'next/app';
 import dynamic from 'next/dynamic';
 import { Layout, version } from 'antd';
@@ -7,7 +7,7 @@ import Router, { useRouter } from 'next/router';
 import HostAppMenu from '../components/menu';
 import 'antd/dist/antd.css';
 
-const SharedNav = dynamic(() => import('home/SharedNav'), { ssr: true });
+const SharedNav = lazy(() => import('home/SharedNav'));
 
 function MyApp({ Component, pageProps }) {
   const { asPath } = useRouter();

apps/3002-checkout/pages/checkout/index.tsx

@@ -43,8 +43,21 @@ const Checkout = (props) => (
   </div>
 );
 Checkout.getInitialProps = async () => {
-  return await fetch('https://jsonplaceholder.typicode.com/todos/1').then(
-    (res) => res.json(),
-  );
+  const timeout = (ms: number) =>
+    new Promise((resolve) => setTimeout(resolve, ms));
+
+  const fetchPromise = fetch(
+    'https://jsonplaceholder.typicode.com/todos/1',
+  ).then((res) => res.json());
+
+  // this will resolve after 3 seconds
+  const timerPromise = timeout(3000).then(() => ({
+    userId: 1,
+    id: 1,
+    title: 'delectus aut autem',
+    completed: false,
+  }));
+
+  return Promise.race([fetchPromise, timerPromise]);
 };
 export default Checkout;

apps/node-host/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.tmp.json",
   "files": [],
   "include": [],
   "references": [

apps/node-host/webpack.config.js

@@ -1,6 +1,9 @@
-const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
+const { registerTsConfigPaths } = require('nx/src/plugins/js/utils/register');
+const { workspaceRoot } = require('nx/src/utils/workspace-root');
+const path = require('path');
+
+registerTsConfigPaths(path.join(workspaceRoot, 'tsconfig.tmp.json'));
 
-registerPluginTSTranspiler();
 const { composePlugins, withNx } = require('@nx/webpack');
 const { UniversalFederationPlugin } = require('@module-federation/node');
 
@@ -18,10 +21,9 @@ module.exports = composePlugins(withNx(), (config) => {
       isServer: true,
       name: 'node_host',
       remotes: {
-        node_local_remote: 'commonjs ../node-local-remote/remoteEntry.js',
+        // node_local_remote: 'commonjs ../node-local-remote/remoteEntry.js',
         node_remote: 'node_remote@http://localhost:3002/remoteEntry.js',
       },
-      experiments: {},
     }),
   );
   return config;

package.json

@@ -28,9 +28,6 @@
     "serve:website": "nx run website:serve",
     "build:website": "nx run website:build.netlify",
     "extract-i18n:website": "nx run website:extract-i18n",
-    "postinstall": "npm run sync:types:webpack",
-    "sync:types:webpack": "cp -rf ./webpack/* ./node_modules/webpack",
-    "sync:pullMFTypes": "concurrently \"node ./packages/enhanced/pullts.js\"",
     "app:next:dev": "nx run-many --target=build --configuration=development -p enhanced utils nextjs-mf  && nx run-many --target=serve --configuration=development -p 3000-home 3001-shop 3002-checkout",
     "app:next:prod": "nx run-many --target=build --configuration=production -p 3000-home 3001-shop 3002-checkout && nx run-many --target=serve --configuration=production -p 3000-home 3001-shop 3002-checkout",
     "app:runtime:dev": "nx run-many --target=serve -p runtime_demo_host runtime_demo_remote1",