[Vue2 +模块联合]：依赖项中的错误"TypeError:无法读取未定义的属性(读取‘警告’)“

Question

我试图使用模块联合在Vue2中创建一个Vue2，就像Pinia提供了一种关于商店的单例行为，这对于模块联合中的使用来说是很棒的，问题是当我注入这个错误时，是及时的(我在一个独特的应用程序中进行了以前的测试，这是可行的)

这就是错误：

​

​

代码的相关部分是：

​

下面是我的配置：

Child1:公开它的组件的包含这个vue.config.js

const { defineConfig } = require('@vue/cli-service')
const {ModuleFederationPlugin} = require("webpack").container;
const deps = require("./package.json");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: 'auto',
  configureWebpack: {
    plugins: [
        new ModuleFederationPlugin({
            name: 'child1',
            filename: 'remoteEntry.js',
            exposes: {
              './ResultsPage': './src/pages/ResultsPage',
              './Test1Page' : './src/pages/Test1Page',
              './Test2Page' : './src/pages/Test2Page',
              './appStore' : './src/store/appStore.js'
            },
            shared: require("./package.json").dependencies,
          }),
    ],
  }
})

package.json：

{
  "name": "child2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/composition-api": "^1.7.0",
    "core-js": "^3.8.3",
    "pinia": "^2.0.17",
    "vue": "^2.6.14",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-unit-mocha": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/test-utils": "^1.1.3",
    "chai": "^4.2.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-cli-plugin-pinia": "~0.1.4",
    "vue-template-compiler": "^2.6.14"
  }
}

父级：，这是vue.config.js的工作方式

const { defineConfig } = require("@vue/cli-service");
const { ModuleFederationPlugin } = require("webpack").container;
const ExternalTemplateRemotesPlugin = require("external-remotes-plugin");
const deps = require("./package.json");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "microfrontends-library",
        remotes: {
          child1: "child1@http://localhost:3013/remoteEntry.js",
          //child2: "child2@http://localhost:3014/remoteEntry.js",
        },
        shared: require('./package.json').dependencies,
      })
    ],
  },
});

及其package.json

{
  "name": "parent",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/composition-api": "^1.7.0",
    "core-js": "^3.8.3",
    "pinia": "^2.0.17",
    "vue": "^2.6.14",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^1.1.3",
    "@vue/vue2-jest": "^27.0.0-alpha.2",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-cli-plugin-pinia": "~0.1.4",
    "vue-template-compiler": "^2.6.14"
  }
}

在简历中:我没有HTTP服务器，因为我正在构建子服务器，它们使用HTTP服务器进行支持(将来，我想将CDN添加到这个子服务器中)

所有的帮助都会被接受，真的，我陷入了困境，所以任何向解决方案的移动都是很棒的

Answer 1

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
           test: /\.mjs$/,
           include: /node_modules/,
           type: "javascript/auto"
         }
       ] 
     }
   }
}

我在answer中找到了这个解决方案

为我工作