fix: React TypeError: Cannot read properties of null (reading

'useState') fix originjs#294
flyfishzy · Feb 9, 2023 · 910cd6a · drzhbe · Feb 10, 2023 · 910cd6a
1 parent 8840165
commit 910cd6a
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 23 deletions.
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
@@ -86,6 +86,13 @@ export default function federation(
     enforce: 'post',
     // apply:'build',
     options(_options) {
+      if (
+        _options?.output[0]?.format === 'system' ||
+        _options?.output[0]?.format === 'systemjs'
+      ) {
+        builderInfo.isSystemjs = true
+      }
+
       // rollup doesnt has options.mode and options.command
       if (!registerCount++) {
         registerPlugins((options.mode = options.mode ?? 'production'), '')

diff --git a/packages/lib/src/prod/remote-production.ts b/packages/lib/src/prod/remote-production.ts
@@ -169,7 +169,7 @@ export function prodRemotePlugin(
               }${
                 sharedInfo[1].root ? sharedInfo[1].root[0] + '/' : ''
               }${basename}`,
-              preserveSignature: 'strict',
+              preserveSignature: 'allow-extension',
               name: sharedInfo[0]
             })
             sharedFileName2Prop.set(basename, sharedInfo as ConfigTypeSet)
@@ -259,48 +259,61 @@ export function prodRemotePlugin(
         const magicString = new MagicString(code)
         const hasStaticImported = new Map<string, string>()
         let requiresRuntime = false
-        let needImportShared = false
+        let hasImportShared = false
         let modify = false
+
         walk(ast, {
           enter(node: any) {
-            //     handle share, eg. replace import {a} from b  -> const a = importShared('b')
+            // handle share, eg. replace import {a} from b  -> const a = importShared('b')
             if (node.type === 'ImportDeclaration') {
               const moduleName = node.source.value
               if (
                 parsedOptions.prodShared.some(
                   (sharedInfo) => sharedInfo[0] === moduleName
                 )
               ) {
-                const declaration: (string | never)[] = []
+                const namedImportDeclaration: (string | never)[] = []
+                let defaultImportDeclaration: string | null = null
                 if (!node.specifiers?.length) {
-                  //  invalid import , like import './__federation_shared_lib.js' , and remove it
+                  // invalid import , like import './__federation_shared_lib.js' , and remove it
                   magicString.remove(node.start, node.end)
                   modify = true
                 } else {
                   node.specifiers.forEach((specify) => {
-                    declaration.push(
-                      `${
-                        specify.imported?.name
-                          ? `${
-                              specify.imported.name === specify.local.name
-                                ? specify.local.name
-                                : `${specify.imported.name}:${specify.local.name}`
-                            }`
-                          : `default:${specify.local.name}`
-                      }`
-                    )
+                    if (specify.imported?.name) {
+                      namedImportDeclaration.push(
+                        `${
+                          specify.imported.name === specify.local.name
+                            ? specify.imported.name
+                            : `${specify.imported.name}:${specify.local.name}`
+                        }`
+                      )
+                    } else if (builderInfo.isSystemjs) {
+                      namedImportDeclaration.push(
+                        `default:${specify.local.name}`
+                      )
+                    } else {
+                      defaultImportDeclaration = specify.local.name
+                    }
                   })
-                  needImportShared = true
+                  hasImportShared = true
                 }
-                if (declaration.length) {
+                if (defaultImportDeclaration) {
+                  magicString.overwrite(
+                    node.start,
+                    node.end,
+                    `const ${defaultImportDeclaration} = await importShared('${moduleName}');\n`
+                  )
+                  hasImportShared = true
+                } else if (namedImportDeclaration.length) {
                   magicString.overwrite(
                     node.start,
                     node.end,
-                    `const {${declaration.join(
+                    `const {${namedImportDeclaration.join(
                       ','
                     )}} = await importShared('${moduleName}');\n`
                   )
-                  needImportShared = true
+                  hasImportShared = true
                 }
               }
             }
@@ -442,13 +455,13 @@ export function prodRemotePlugin(
           )
         }
 
-        if (needImportShared) {
+        if (hasImportShared) {
           magicString.prepend(
             `import {importShared} from '\0virtual:__federation_fn_import';\n`
           )
         }
 
-        if (requiresRuntime || needImportShared || modify) {
+        if (requiresRuntime || hasImportShared || modify) {
           return magicString.toString()
         }
       }

diff --git a/packages/lib/src/prod/shared-production.ts b/packages/lib/src/prod/shared-production.ts
@@ -70,13 +70,23 @@ export function prodSharedPlugin(
           }
         }
         if(module){
+          ${
+            builderInfo.isSystemjs
+              ? ''
+              : 'module = module.default ? module.default : module'
+          }
           moduleCache[name] = module;
           return module;
         }
       }
       async function getSharedFromLocal(name , shareScope) {
         if (moduleMap[name]?.import) {
           const module = (await moduleMap[name].get())()
+          ${
+            builderInfo.isSystemjs
+              ? ''
+              : 'module = module.default ? module.default : module'
+          }
           moduleCache[name] = module;
           return module;
         } else {

diff --git a/packages/lib/src/public.ts b/packages/lib/src/public.ts
@@ -30,7 +30,8 @@ export const builderInfo = {
   assetsDir: '',
   isHost: false,
   isRemote: false,
-  isShared: false
+  isShared: false,
+  isSystemjs: false
 }
 export const parsedOptions = {
   prodExpose: [] as (string | ConfigTypeSet)[],