fix: Fix call undefined delegate (#1149)

* fix: thrown error during chunk correlation of empty graph connection

* fix: call of undefined errors in delegate modules

* test: fix tests of delegate plugin

* chore: prettier

* refactor: improve package fragmentation

re-export underlaying utilities to allow for less fragmentation of package versions for the sake of access to these tools

* fix: prevent module graph connection conflict (#1151)

* fix: prevent module graph connection conflict

I remove eager modules from remote, but in doing so also removes dependencies of delegate moduels, this preserves dependency tree of delegate module and removes all other eager references from eager:true

* test: fix mock of delegate module eager flag

* test: fix mock of delegate module eager flag

* test: fix mock of delegate module eager flag

* feat: support next/image

* style:lint fix

* style:lint fix

* style:lint fix

.eslintrc.json

@@ -7,7 +7,7 @@
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
         "@nrwl/nx/enforce-module-boundaries": [
-          "error",
+          "warn",
           {
             "enforceBuildableLibDependency": true,
             "allow": [],

apps/3000-home/next.config.js

@@ -3,7 +3,7 @@ const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js');
 registerPluginTSTranspiler();
 const { withNx } = require('@nrwl/next/plugins/with-nx');
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
-const { createDelegatedModule } = require('@module-federation/utilities');
+const { createDelegatedModule } = require('@module-federation/nextjs-mf/utilities');
 
 /**
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
@@ -53,6 +53,7 @@ const nextConfig = {
           antd: {},
         },
         extraOptions: {
+          debug:false,
           exposePages: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,

apps/3000-home/pages/dynamic-remote.js

@@ -1,6 +1,6 @@
 import React from 'react';
 //eslint-disable-next-line
-import { injectScript } from '@module-federation/utilities';
+import { injectScript } from '@module-federation/nextjs-mf/utilities';
 // example of dynamic remote import on server and client
 const isServer = typeof window === 'undefined';
 //could also use

apps/3000-home/pages/index.tsx

@@ -2,8 +2,6 @@ import React, { Suspense, lazy } from 'react';
 import Head from 'next/head';
 import CheckoutTitle from 'checkout/CheckoutTitle';
 import ButtonOldAnt from 'checkout/ButtonOldAnt';
-console.log(ButtonOldAnt);
-// console.log('cc', cc);
 // const CheckoutTitle = lazy(() => import('checkout/CheckoutTitle'));
 // const ButtonOldAnt = lazy(() => import('checkout/ButtonOldAnt'));
 const WebpackSvgRemote = lazy(() =>

apps/3000-home/remote-delegate.js

@@ -1,13 +1,11 @@
+import importDelegatedModule from "@module-federation/nextjs-mf/importDelegatedModule";
 /* eslint-disable no-undef */
 // eslint-disable-next-line no-async-promise-executor
 module.exports = new Promise(async (resolve, reject) => {
   //eslint-disable-next-line
   const currentRequest = new URLSearchParams(__resourceQuery).get('remote');
 
   const [global, url] = currentRequest.split('@');
-  const { importDelegatedModule } = await import(
-    '@module-federation/utilities/src/utils/importDelegatedModule'
-  );
 
   importDelegatedModule({
     global,

apps/3001-shop/next.config.js

@@ -4,7 +4,7 @@ registerPluginTSTranspiler();
 const { withNx } = require('@nx/next/plugins/with-nx');
 
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
-const { createDelegatedModule } = require('@module-federation/utilities');
+const { createDelegatedModule } = require('@module-federation/nextjs-mf/utilities');
 
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}

apps/3001-shop/pages/_document.js

@@ -1,3 +1,4 @@
+//eslint-disable @nrwl/nx/enforce-module-boundaries
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import {

apps/3001-shop/remote-delegate.js

@@ -1,29 +1,22 @@
 /* eslint-disable no-undef */
-
-// Delegates are currently not used in this example, but are left here for testing.
 // eslint-disable-next-line no-async-promise-executor
 module.exports = new Promise(async (resolve, reject) => {
-  const { importDelegatedModule } = await import(
-    '@module-federation/utilities'
-  );
-
-  //eslint-disable-next-line
-  // console.log('Delegate being called for', __resourceQuery, __webpack_runtime_id__);
   //eslint-disable-next-line
   const currentRequest = new URLSearchParams(__resourceQuery).get('remote');
 
   const [global, url] = currentRequest.split('@');
+  const {importDelegatedModule} = await import("@module-federation/nextjs-mf/importDelegatedModule")
 
   importDelegatedModule({
     global,
     url: url + '?' + Date.now(),
   })
     .then(async (remote) => {
-      // console.log(
-      //   __resourceQuery,
-      //   'resolved remote from',
-      //   __webpack_runtime_id__
-      // );
+      console.log(
+        __resourceQuery,
+        'resolved remote from',
+        __webpack_runtime_id__
+      );
 
       resolve(remote);
     })

apps/3002-checkout/next.config.js

@@ -4,7 +4,8 @@ registerPluginTSTranspiler();
 const { withNx } = require('@nx/next/plugins/with-nx');
 
 const NextFederationPlugin = require('@module-federation/nextjs-mf');
-const { createDelegatedModule } = require('@module-federation/utilities');
+const { createDelegatedModule } = require('@module-federation/nextjs-mf/utilities');
+
 
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}

apps/3002-checkout/pages/_document.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
+//eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import {
   revalidate,
   FlushedChunks,

apps/3002-checkout/remote-delegate.js

@@ -8,7 +8,7 @@ module.exports = new Promise(async (resolve, reject) => {
   //eslint-disable-next-line
   const currentRequest = new URLSearchParams(__resourceQuery).get('remote');
   const { importDelegatedModule } = await import(
-    '@module-federation/utilities'
+    '@module-federation/nextjs-mf/importDelegatedModule'
   );
 
   const [global, url] = currentRequest.split('@');

package.json

@@ -33,6 +33,7 @@
     "prod": "nx build:libs && nx run-many --target=build --verbose --output-style=stream",
     "commit": "cz",
     "git:pruneTags": "git tag -l | xargs git tag -d && git fetch --all --prune --tags",
+    "release:normal": "nx run-many --target=version --projects=utils,node,nextjs-mf --maxParallel=1 --allowEmptyRelease=true",
     "prerelease:all": "nx run-many --target=version --projects=utils,node,nextjs-mf --releaseAs=prerelease --preid=rc --maxParallel=1 --allowEmptyRelease=true",
     "release:node": "nx run node:version",
     "release:next": "nx run nextjs-mf:version",

packages/nextjs-mf/README.md

@@ -253,7 +253,7 @@ If an error surfaces while loading the script, a unique error object is generate
 
 ```js
 //next.config.js
-const { createDelegatedModule } = require('@module-federation/utilities');
+const { createDelegatedModule } = require('@module-federation/nextjs-mf/utilities');
 const remotes = {
   checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
     remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
@@ -266,7 +266,7 @@ const remotes = {
 // ALL imports MUST BE dynamic imports in here like import()
 module.exports = new Promise(async (resolve, reject) => {
   const { importDelegatedModule } = await import(
-    '@module-federation/utilities/src/utils/importDelegatedModule'
+    '@module-federation/nextjs-mf/importDelegatedModule'
   );
   // eslint-disable-next-line no-undef
   const currentRequest = new URLSearchParams(__resourceQuery).get('remote');
@@ -308,7 +308,7 @@ For more information on `__resourceQuery` visit: https://webpack.js.org/api/modu
 
 ```js
 // next.config.js
-// its advised you use createDelegatedModule from @module-federation/utilities instead of manually creating the delegate module
+// its advised you use {createDelegatedModule} from @module-federation/utilities (re-exported as @module-federation/nextjs-mf/utilities) instead of manually creating the delegate module
 const remotes = {
   // pass pointer to remote-delegate, pass delegate remote name as query param,
   // at runtime webpack will pass this as __resourceQuery

packages/nextjs-mf/importDelegatedModule.ts

@@ -0,0 +1,3 @@
+import {importDelegatedModule as importDelegate} from "@module-federation/utilities/src/utils/importDelegatedModule";
+export const importDelegatedModule = importDelegate;
+export default importDelegate;

packages/nextjs-mf/node.ts

@@ -0,0 +1 @@
+export * from "@module-federation/node"