ModernJS async boundary

.github/workflows/on-pull-request.yml

@@ -101,7 +101,6 @@ jobs:
       - name: Create matrix
         id: set-matrix
         run: |
-          npm install lerna@6 -g
           matrix="$(node checkChangedWorkspaces.js)"
           echo "matrix=$matrix" >> $GITHUB_OUTPUT
 
@@ -208,7 +207,7 @@ jobs:
           # TODO Uncomment when yarn will work properly from the root and install all nessessary deps. Also please, add yarn install to the run section below instead of npx lerna exec
         # if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: |
-          lerna exec --stream --scope="${{ matrix.container }}*" --concurrency=1 "yarn install"
+          npx lerna exec --stream --scope="${{ matrix.container }}*" --concurrency=1 "yarn install"
 
       - name: Check disk space after install
         run: |
@@ -222,9 +221,7 @@ jobs:
       - name: Run sample e2e tests
         run: |
           node -v
-          yarn add lerna@6 -W
-          yarn add lerna@6 -g
-          lerna run --scope=${{ matrix.container }} e2e:ci
+          npx lerna run --scope=${{ matrix.container }} e2e:ci
 
       - name: Create artifacts for Allure report
         uses: actions/upload-artifact@v3

complete-react-case/main-app/index.js

@@ -1 +1,12 @@
-import('./bootstrap.js');
+const promises = []
+__webpack_require__.f.remotes('main',promises);
+await Promise.all(promises);
+console.log(promises)
+const thing = await new Promise((r)=>r('test'))
+console.log(thing);
+require('./bootstrap');
+if(globalThis.neverTrue) {
+  // dynamic import data uri
+  import('data:text/javascript,export default 42');
+}
+export default {}

complete-react-case/main-app/package.json

@@ -3,7 +3,6 @@
   "private": true,
   "version": "1.0.0",
   "description": "",
-  "main": "webpack.config.js",
   "scripts": {
     "webpack": "webpack --watch",
     "serve": "serve dist -p 3002",

complete-react-case/main-app/webpack.config.js

@@ -5,6 +5,10 @@ module.exports = {
   entry: './index.js',
   mode: 'development',
   devtool: 'hidden-source-map',
+  cache:false,
+  // experiments: {
+  //   topLevelAwait: true
+  // },
   output: {
     publicPath: 'http://localhost:3002/',
     clean: true,

lerna.json

@@ -1,5 +1,5 @@
 {
   "version": "0.0.0",
   "npmClient": "yarn",
-  "useWorkspaces": true
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

medusa-nx-native-federation-example/packages/dsl/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "dsl",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/dsl/src",
   "projectType": "application",
@@ -9,10 +10,7 @@
         "outputPath": "dist/dsl",
         "index": "packages/dsl/src/index.html",
         "main": "packages/dsl/src/app/index.ts",
-        "assets": [
-          "packages/dsl/src/assets",
-          "packages/dsl/src/favicon.ico"
-        ]
+        "assets": ["packages/dsl/src/assets", "packages/dsl/src/favicon.ico"]
       },
       "configurations": {
         "production": {

medusa-nx-native-federation-example/packages/home/project.json

@@ -10,16 +10,8 @@
         "outputPath": "dist/home",
         "index": "packages/home/src/index.html",
         "main": "packages/home/src/app/index.ts",
-        "assets": [
-          "packages/home/src/assets",
-          "packages/home/src/favicon.ico"
-        ],
-        "remotes": [
-          "nav",
-          "dsl",
-          "search",
-          "utils"
-        ]
+        "assets": ["packages/home/src/assets", "packages/home/src/favicon.ico"],
+        "remotes": ["nav", "dsl", "search", "utils"]
       },
       "configurations": {
         "production": {

medusa-nx-native-federation-example/packages/nav/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "nav",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/nav/src",
   "projectType": "application",
@@ -9,15 +10,8 @@
         "outputPath": "dist/nav",
         "index": "packages/nav/src/index.html",
         "main": "packages/nav/src/app/index.ts",
-        "assets": [
-          "packages/nav/src/assets",
-          "packages/nav/src/favicon.ico"
-        ],
-        "remotes": [
-          "dsl",
-          "search",
-          "utils"
-        ]
+        "assets": ["packages/nav/src/assets", "packages/nav/src/favicon.ico"],
+        "remotes": ["dsl", "search", "utils"]
       },
       "configurations": {
         "production": {

medusa-nx-native-federation-example/packages/search/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "search",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/search/src",
   "projectType": "application",
@@ -9,16 +10,8 @@
         "outputPath": "dist/search",
         "index": "packages/search/src/index.html",
         "main": "packages/search/src/app/index.ts",
-        "assets": [
-          "packages/search/src/assets",
-          "packages/search/src/favicon.ico"
-        ],
-        "remotes": [
-          "nav",
-          "dsl",
-          "home",
-          "utils"
-        ]
+        "assets": ["packages/search/src/assets", "packages/search/src/favicon.ico"],
+        "remotes": ["nav", "dsl", "home", "utils"]
       },
       "configurations": {
         "production": {

medusa-nx-native-federation-example/packages/utils/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "utils",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/utils/src",
   "projectType": "application",
@@ -9,10 +10,7 @@
         "outputPath": "dist/utils",
         "index": "packages/utils/src/index.html",
         "main": "packages/utils/src/app/index.ts",
-        "assets": [
-          "packages/utils/src/assets",
-          "packages/utils/src/favicon.ico"
-        ]
+        "assets": ["packages/utils/src/assets", "packages/utils/src/favicon.ico"]
       },
       "configurations": {
         "production": {

nextjs-ssr-react-query/.gitignore

@@ -39,4 +39,5 @@ testem.log
 Thumbs.db
 
 # Next.js
-.next
+.next
+.nx/cache

nextjs-ssr-react-query/.prettierignore

@@ -2,3 +2,5 @@
 
 /dist
 /coverage
+
+/.nx/cache

nextjs-ssr-react-query/apps/button/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'button',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/button',

nextjs-ssr-react-query/apps/button/next.config.js

@@ -1,10 +1,10 @@
-const { withNx } = require('@nrwl/next/plugins/with-nx');
+const { withNx } = require('@nx/next/plugins/with-nx');
 const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
 
 const { dependencies } = require('../../package.json');
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
   nx: {
@@ -34,7 +34,7 @@ const nextConfig = {
             requiredVersion: dependencies['styled-components'],
           },
         },
-      })
+      }),
     );
 
     return config;

nextjs-ssr-react-query/apps/button/project.json

@@ -5,11 +5,12 @@
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/next:build",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@nx/next:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "defaultConfiguration": "production",
       "options": {
-        "root": "apps/button",
         "outputPath": "dist/apps/button"
       },
       "configurations": {
@@ -20,7 +21,7 @@
       }
     },
     "serve": {
-      "executor": "@nrwl/next:server",
+      "executor": "@nx/next:server",
       "defaultConfiguration": "development",
       "options": {
         "buildTarget": "button:build",
@@ -39,14 +40,16 @@
       }
     },
     "export": {
-      "executor": "@nrwl/next:export",
+      "executor": "@nx/next:export",
       "options": {
         "buildTarget": "button:build:production"
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/button/jest.config.ts",
         "passWithNoTests": true
@@ -59,10 +62,14 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/button/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/button/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },

nextjs-ssr-react-query/apps/header/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'header',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/header',

nextjs-ssr-react-query/apps/header/next.config.js

@@ -1,10 +1,10 @@
-const { withNx } = require('@nrwl/next/plugins/with-nx');
+const { withNx } = require('@nx/next/plugins/with-nx');
 const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
 
 const { dependencies } = require('../../package.json');
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
   nx: {
@@ -34,7 +34,7 @@ const nextConfig = {
             requiredVersion: dependencies['styled-components'],
           },
         },
-      })
+      }),
     );
 
     return config;

nextjs-ssr-react-query/apps/header/project.json

@@ -5,11 +5,12 @@
   "projectType": "application",
   "targets": {
     "build": {
-      "executor": "@nrwl/next:build",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@nx/next:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "defaultConfiguration": "production",
       "options": {
-        "root": "apps/header",
         "outputPath": "dist/apps/header"
       },
       "configurations": {
@@ -20,7 +21,7 @@
       }
     },
     "serve": {
-      "executor": "@nrwl/next:server",
+      "executor": "@nx/next:server",
       "defaultConfiguration": "development",
       "options": {
         "buildTarget": "header:build",
@@ -39,14 +40,16 @@
       }
     },
     "export": {
-      "executor": "@nrwl/next:export",
+      "executor": "@nx/next:export",
       "options": {
         "buildTarget": "header:build:production"
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "executor": "@nx/jest:jest",
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/header/jest.config.ts",
         "passWithNoTests": true
@@ -59,10 +62,14 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/header/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/header/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },

nextjs-ssr-react-query/apps/host/jest.config.ts

@@ -3,8 +3,8 @@ export default {
   displayName: 'host',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/host',