Vue2 + Webpack Module Federation报错：Cannot read properties of undefined (reading 'call')

AI 小北

2026-8-2

Vue 2 应用 Webpack Module Federation 运行时错误排查求助

我们有一个基于 Vue 2 开发的应用，需要通过 Webpack Module Federation 拆分为微服务架构。已完成依赖升级以支持 Webpack 5，创建了 Yarn monorepo，拆分出的「content」子包可独立正常运行，但主应用出现运行时错误：

调整导入路径满足 TypeScript 编译要求，且在「content」微服务配置对应端点后，主应用编译成功，但运行时控制台抛出以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (app.js:436243:33)
    at fn (app.js:436463:21)
    at ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??ruleSet[0].rules[0].use[1]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/dashboard/client/ClientContentCalendarCard.vue?vue&type=script&lang=ts& (app.js:12517:89)
    at __webpack_require__ (app.js:436243:33)
    at fn (app.js:436463:21)
    at ./src/dashboard/client/ClientContentCalendarCard.vue?vue&type=script&lang=ts& (app.js:294006:264)
    at __webpack_require__ (app.js:436243:33)
    at fn (app.js:436463:21)
    at ./src/dashboard/client/ClientContentCalendarCard.vue (app.js:224827:113)
    at __webpack_require__ (app.js:436243:33)

已尝试的方案：

重复三次完整升级流程
移除 vue-cli，改用纯 Webpack 配置
尝试多种 Webpack/TypeScript/Babel/Eslint 配置组合
替换为 FederatedTypesPlugin 确保类型完整性

推测问题可能出在 loader 链异常，因为应用在加载依赖远程 Vue 模板的组件时崩溃，目前陷入困境，求解决或排查思路。

相关配置文件

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const { FederatedTypesPlugin }= require('@module-federation/typescript');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
    client: {
      overlay: false,
    },
    port: 8081,
  },
  plugins: [
    new FederatedTypesPlugin({
      federationConfig: {
        name: "shell",
        remotes: {
          content: "content@http://localhost:8082/remoteEntry.js"
        },
        filename: 'remoteEntry.js',
      },
    }),
  ],
});

注：webpack.common.js 为移除 vue-cli 前通过 vue inspect 导出的配置

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "noImplicitAny": false,
    "types": [
      "webpack-env",
      "gapi",
      "gapi.auth2",
      "vue/types",
      "vue-router/types",
      "jest",
    ],
    "paths": {
      "*": [ 
        "@mf-types/*" 
      ],      
      "content/*": [
        "packages/content/src/content/*"
      ],
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "@mf-types/**/*.ts",
  ],
  "exclude": [
    "node_modules"
  ]
}

babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      'transform-imports',
      {
        quasar: {
          transform: 'quasar/dist/babel-transforms/imports.js',
          preventFullImport: true,
        },
      },
    ],
  ],
};

.eslintrc.js

module.exports = {
  root: true,

  env: {
    node: true,
  },

  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
    '@vue/typescript',
  ],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'import/extensions': 'never',
    'no-param-reassign': 'off',
    'max-len': 'off',
    'vue/require-v-for-key': 'off',
    'vue/no-use-v-if-with-v-for': 'off',
    'vue/no-unused-components': 'off',
    'vue/no-side-effects-in-computed-properties': 'off',
    'linebreak-style': 'off',
    'import/prefer-default-export': 'off',
  },

  parserOptions: {
    parser: '@typescript-eslint/parser',
  },

  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ],

  settings: {
    'import/resolver': {
        'node': {
            'paths': ['src', 'packages/content/src'],
            'extensions': ['.js', '.ts', '.d.ts']
        },
    },
  },       
};

package.json

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "description": "description",
  "scripts": {
    "serve": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "workspaces": [
    "packages/content"
  ],
  "dependencies": {
    "@quasar/extras": "1.5.2",
    "animate.css": "^3.7.2",
    "autosize": "^4.0.0",
    "axios": "0.17.1",
    "buefy": "0.6.6",
    "bulma": "^0.6.1",
    "chart.js": "^3.5.1",
    "core-js": "^3.27.2",
    "deepmerge": "^2.0.1",
    "flatpickr": "^4.6.3",
    "gridstack": "^4.2.6",
    "jquery": "^3.4.0",
    "link-prevue": "^1.1.3",
    "lodash": "4.17.15",
    "moment": "^2.21.0",
    "papaparse": "^4.6.3",
    "promise.prototype.finally": "^3.1.0",
    "quasar": "1.9.4",
    "sec-to-min": "^1.0.1",
    "uuid": "^3.3.2",
    "vue": "^2.6.10",
    "vue-ckeditor2": "^1.18.0",
    "vue-class-component": "^7.0.2",
    "vue-dompurify-html": "^2.1.0",
    "vue-flatpickr-component": "^8.1.2",
    "vue-full-calendar": "^2.7.0",
    "vue-property-decorator": "8.4.0",
    "vue-router": "3.1.5",
    "vue-scrollto": "^2.8.0",
    "vue-select": "^3.0.2",
    "vuedraggable": "^2.15.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@module-federation/typescript": "2.1.5",
    "@types/gapi": "0.0.39",
    "@types/gapi.auth2": "0.0.51",
    "@types/jest": "^24.0.19",
    "@types/lodash": "^4.14.144",
    "@types/promise.prototype.finally": "^2.0.3",
    "@types/uuid": "^8.3.1",
    "@types/vuedraggable": "^2.23.2",
    "@vue/babel-preset-app": "^5.0.8",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "^1.2.2",
    "autoprefixer": "^10.4.13",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.9.0",
    "babel-loader": "^9.1.2",
    "babel-plugin-transform-imports": "1.5.0",
    "cache-loader": "^4.1.0",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "1.0.1",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "file-loader": "^3.0.1",
    "fork-ts-checker-webpack-plugin": "^7.3.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^24.9.0",
    "jest-serializer-vue": "^2.0.2",
    "mini-css-extract-plugin": "^2.7.2",
    "node-sass": "^4.9.0",
    "postcss": "^8.4.21",
    "postcss-loader": "^7.0.2",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "ts-loader": "^9.4.2",
    "typescript": "^3.9.10",
    "url-loader": "^4.1.1",
    "vue-loader": "^15.10.1",
    "vue-loader-plugin": "^1.3.0",
    "vue-template-compiler": "2.6.10",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0"
  },
  "packageManager": "yarn@3.3.1",
  "engines": {
    "node": "^14.21.0"
  }
}

内容的提问来源于stack exchange，提问作者cmon

Vue2 + Webpack Module Federation报错：Cannot read properties of undefined (reading 'call')

相关配置文件 #

webpack.dev.js #

tsconfig.json #

babel.config.js #

.eslintrc.js #