fix: vite 2.9.0 causes manualChunks failed (#183)

Author: Jiannan-dev

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm run lint-staged --workspace-concurrency false
+pnpm run lint-staged

package.json

@@ -46,9 +46,9 @@
   },
   "lint-staged": {
     "*.{ts,js,json,tsx,jsx,vue}": [
-      "eslint",
+      "prettier --write",
       "eslint --cache --fix",
-      "prettier --write"
+      "eslint"
     ]
   }
 }

packages/lib/src/index.ts

@@ -148,7 +148,6 @@ export default function federation(
     },
 
     outputOptions(outputOptions) {
-      outputOptions.manualChunks = outputOptions.manualChunks || {}
       for (const pluginHook of pluginList) {
         pluginHook.outputOptions?.call(this, outputOptions)
       }

packages/lib/src/prod/shared-production.ts

@@ -2,16 +2,22 @@ import type { PluginHooks } from '../../types/pluginHooks'
 import {
   findDependencies,
   getModuleMarker,
-  parseOptions, removeNonRegLetter
+  parseOptions,
+  removeNonRegLetter
 } from '../utils'
 import { builderInfo, EXPOSES_MAP, parsedOptions } from '../public'
 import type { ConfigTypeSet, VitePluginFederationOptions } from 'types'
 import { walk } from 'estree-walker'
 import MagicString from 'magic-string'
 import { join, sep, resolve, basename } from 'path'
 import { readdirSync, statSync } from 'fs'
-import type { OutputOptions, PluginContext, OutputChunk, RenderedChunk } from 'rollup'
-import {sharedFileName2Prop} from "./remote-production";
+import type {
+  OutputOptions,
+  PluginContext,
+  OutputChunk,
+  RenderedChunk
+} from 'rollup'
+import { sharedFileName2Prop } from './remote-production'
 const sharedFileReg = /^__federation_shared_.+\.js$/
 
 export function prodSharedPlugin(
@@ -42,7 +48,12 @@ export function prodSharedPlugin(
   const moduleCheckedSet = new Set<string>()
   const moduleNeedToTransformSet = new Set<string>() // record modules that import shard libs, and refered in chunk tranform logic
 
-  const transformImportFn = function (this: PluginContext, code, chunk: OutputChunk | RenderedChunk, options: OutputOptions) {
+  const transformImportFn = function (
+    this: PluginContext,
+    code,
+    chunk: OutputChunk | RenderedChunk,
+    options: OutputOptions
+  ) {
     const ast = this.parse(code)
     const magicString = new MagicString(code)
     let modify = false
@@ -55,7 +66,9 @@ export function prodSharedPlugin(
                 node.type === 'ImportDeclaration' &&
                 sharedFileReg.test(basename(node.source.value))
               ) {
-                const sharedName = sharedFileName2Prop.get(basename(node.source.value))?.[0];
+                const sharedName = sharedFileName2Prop.get(
+                  basename(node.source.value)
+                )?.[0]
                 if (sharedName) {
                   const declaration: (string | never)[] = []
                   node.specifiers?.forEach((specify) => {
@@ -106,8 +119,7 @@ export function prodSharedPlugin(
                   : node.body.find(
                       (item) =>
                         item.type === 'ExpressionStatement' &&
-                        item.expression?.callee?.object?.name ===
-                          'System' &&
+                        item.expression?.callee?.object?.name === 'System' &&
                         item.expression.callee.property?.name === 'register'
                     )?.expression
               if (expression) {
@@ -135,21 +147,19 @@ export function prodSharedPlugin(
                     args[1]?.type === 'FunctionExpression'
                   ) {
                     const functionExpression = args[1]
-                    const returnStatement =
-                      functionExpression?.body?.body.find(
-                        (item) => item.type === 'ReturnStatement'
-                      )
+                    const returnStatement = functionExpression?.body?.body.find(
+                      (item) => item.type === 'ReturnStatement'
+                    )
 
                     if (returnStatement) {
                       // insert __federation_import variable
                       magicString.prependLeft(
                         returnStatement.start,
                         'var __federation_import;\n'
                       )
-                      const setters =
-                        returnStatement.argument.properties.find(
-                          (property) => property.key.name === 'setters'
-                        )
+                      const setters = returnStatement.argument.properties.find(
+                        (property) => property.key.name === 'setters'
+                      )
                       const settersElements = setters.value.elements
                       // insert __federation_import setter
                       magicString.appendRight(
@@ -158,10 +168,9 @@ export function prodSharedPlugin(
                           removeLast ? '' : ','
                         }function (module){__federation_import=module.importShared}`
                       )
-                      const execute =
-                        returnStatement.argument.properties.find(
-                          (property) => property.key.name === 'execute'
-                        )
+                      const execute = returnStatement.argument.properties.find(
+                        (property) => property.key.name === 'execute'
+                      )
                       const insertPos = execute.value.body.body[0].start
                       importIndex.forEach((item) => {
                         // remove unnecessary setters and import
@@ -179,7 +188,9 @@ export function prodSharedPlugin(
                             : args[0].elements[item.index + 1].start - 1
                         )
                         // insert federation shared import lib
-                        const varName = `__federation_${removeNonRegLetter(item.name)}`
+                        const varName = `__federation_${removeNonRegLetter(
+                          item.name
+                        )}`
                         magicString.prependLeft(
                           insertPos,
                           `var  ${varName} = await __federation_import('${item.name}');\n`
@@ -202,9 +213,7 @@ export function prodSharedPlugin(
                       // add sharedImport import declaration
                       magicString.appendRight(
                         args[0].end - 1,
-                        `${
-                          removeLast ? '' : ','
-                        }'./__federation_fn_import.js'`
+                        `${removeLast ? '' : ','}'./__federation_fn_import.js'`
                       )
                       modify = true
                     }
@@ -454,33 +463,58 @@ export function prodSharedPlugin(
         const bIndex = priority.findIndex((value) => value === b[0])
         return aIndex - bIndex
       })
+
+      const manualChunkFunc = (id: string, obj: unknown) => {
+        //  if id is in shared dependencies, return id ,else return vite function value
+        const find = parsedOptions.prodShared.find((arr) =>
+          arr[1].dependencies.has(id)
+        )
+        return find ? find[0] : undefined
+      }
+
       // only active when manualChunks is function,array not to solve
       if (typeof outputOption.manualChunks === 'function') {
         outputOption.manualChunks = new Proxy(outputOption.manualChunks, {
           apply(target, thisArg, argArray) {
-            const id = argArray[0]
-            //  if id is in shared dependencies, return id ,else return vite function value
-            const find = parsedOptions.prodShared.find((arr) =>
-              arr[1].dependencies.has(id)
-            )
-            return find ? find[0] : target(argArray[0], argArray[1])
+            const result = manualChunkFunc(argArray[0], argArray[1])
+            return result ? result : target(argArray[0], argArray[1])
           }
         })
       }
 
+      // The default manualChunk function is no longer available from vite 2.9.0
+      if (outputOption.manualChunks === undefined) {
+        outputOption.manualChunks = manualChunkFunc
+      }
+
       // handle expose component import other components which may import shared
-      if (isRemote && parsedOptions.prodShared.length && parsedOptions.prodExpose.length) {
+      if (
+        isRemote &&
+        parsedOptions.prodShared.length &&
+        parsedOptions.prodExpose.length
+      ) {
         // start collect exposed modules and their dependency modules which imported shared libs
-        const exposedModuleIds = parsedOptions.prodExpose.filter(item => !!item?.[1]?.id).map(item => item[1]['id'])
-        const sharedLibIds = new Set( parsedOptions.prodShared.map(item => item?.[1]?.id).filter(item => !!item));
+        const exposedModuleIds = parsedOptions.prodExpose
+          .filter((item) => !!item?.[1]?.id)
+          .map((item) => item[1]['id'])
+        const sharedLibIds = new Set(
+          parsedOptions.prodShared
+            .map((item) => item?.[1]?.id)
+            .filter((item) => !!item)
+        )
 
-        const addDeps = id => {
+        const addDeps = (id) => {
           if (moduleCheckedSet.has(id)) return
           moduleCheckedSet.add(id)
           const info = this.getModuleInfo(id)
           if (!info) return
-          const dependencyModuleIds = [...info.importedIds, ...info.dynamicallyImportedIds]
-          const isImportSharedLib = dependencyModuleIds.some(id => sharedLibIds.has(id))
+          const dependencyModuleIds = [
+            ...info.importedIds,
+            ...info.dynamicallyImportedIds
+          ]
+          const isImportSharedLib = dependencyModuleIds.some((id) =>
+            sharedLibIds.has(id)
+          )
           if (isImportSharedLib) {
             moduleNeedToTransformSet.add(id)
           }
@@ -497,8 +531,12 @@ export function prodSharedPlugin(
       if (moduleNeedToTransformSet.size === 0) return null
       const relatedModules = Object.keys(chunk.modules)
 
-      if (relatedModules.some(id => moduleNeedToTransformSet.has(id))) {
-        const transformedCode = transformImportFn.apply(this, [code, chunk, options])
+      if (relatedModules.some((id) => moduleNeedToTransformSet.has(id))) {
+        const transformedCode = transformImportFn.apply(this, [
+          code,
+          chunk,
+          options
+        ])
         if (transformedCode) return transformedCode
       }
       return null