Блог

Итак, я играю с новой концепцией объединения модулей, доступной в Webpack 5 сейчас. И я получаю следующую ошибку при попытке импортировать компонент из общей библиотеки (другое приложение vue):

 container_entry:12 Uncaught (in promise) Error: Module "./Button.vue" does not exist in container.
while loading "./Button.vue" from webpack/container/reference/home
    at eval (container_entry:12)
 

Оба проекта package.json выглядят следующим образом:

 {
  "name": "vue3",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "build:dev": "webpack --mode development",
    "start": "webpack-dev-server --open --mode development",
    "start:live": "webpack-dev-server --open --mode development --liveReload"
  },
  "license": "MIT",
  "author": {
    "name": "foo",
    "email": "foo@bar.com"
  },
  "devDependencies": {
    "@babel/core": "7.9.6",
    "@babel/preset-env": "^7.10.3",
    "@vue/compiler-sfc": "^3.0.0-rc.10",
    "babel-loader": "8.1.0",
    "css-loader": "^3.5.3",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "1.2.1",
    "webpack": "5.0.0",
    "webpack-cli": "3.3.11",
    "webpack-dev-server": "3.11.0",
    "vue-loader": "16.0.0-beta.7",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "vue": "3.0.0"
  }
}
 

Это основное приложение webpack.config.js файл, который пытается импортировать общую библиотеку и кнопку:

 const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  output: {
    publicPath: "http://localhost:3000/",
  },

  resolve: {
    extensions: [".vue", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3000,
  },

  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
      },
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new VueLoaderPlugin(),
    new ModuleFederationPlugin({
      name: "home",
      filename: "remoteEntry.js",
      remotes: {
        sharedLib: "sharedLib@http://localhost:3001/remoteEntry.js",
      },
      exposes: {},
      shared: require("./package.json").dependencies,
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};
 

И именно здесь я пытаюсь импортировать его в App.vue (приложения под названием «home»)

 <template>
  <div>Hello Vue!<Button :title="'foobar'" /></div>
</template>
<script>
import Button from "sharedLib/Button.vue";
export default {
  components: {
    Button,
  },
};
</script>
 

И, наконец, это webpack.config.js из SharedLib

 const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  output: {
    publicPath: "http://localhost:3001/",
  },

  resolve: {
    extensions: [".vue", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3001,
  },

  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
      },
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  plugins: [
    new VueLoaderPlugin(),
    new ModuleFederationPlugin({
      name: "sharedLib",
      filename: "remoteEntry.js",
      remotes: {
        home: "home@http://localhost:3000/remoteEntry.js",
      },
      exposes: {
        "./Button": "./src/Button.vue",
      },
      shared: require("./package.json").dependencies,
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};
 

Я пытался выяснить, что не так весь день, но я ПРОСТО НЕ ВИЖУ ЭТОГО: (.
Есть идеи о том, где это не удается?

Это потому, что у вас нет компонента с именем ./Button.vue внутри вашего свойства SharedLib exposes .

Внутри webpack.config.js из SharedLib

Вам нужно будет представить компонент как ./Button.vue вместо ./Button