javascript - 尝试导入远程组件时出现无效语法错误

Question

我正在尝试使用模块联合来设置项目，但当我尝试加载组件时它会中断。每当我使用导入的组件运行主机项目时，它都会抛出“未捕获的语法错误:无效或意外的 token ”。我什至尝试使用 React.lazy 导入组件

const MyCheckbox=lazy(async()=>await import("test/toggleCheckbox"));

在主机的模块联合配置中声明为 测试:“test@http://localhost:8080/remoteEntry.js”，

在另一个远程项目上它被声明为

 new ModuleFederationPlugin({
  name: "test",
  filename: "remoteEntry.js",
  remotes: {},
  exposes: {
    './toggleCheckbox': './src/toggleCheckbox'
  },
  shared: {
    ...deps,
    react: {
      singleton: true,
      requiredVersion: deps.react,
    },
    "react-dom": {
      singleton: true,
      requiredVersion: deps["react-dom"],
    },
  },
})

错误(“未捕获的语法错误:无效或意外的标记”)位于此行:

/***/ "webpack/container/reference/test":
/*!************************************************************!*\
  !*** external "test@http://localhost:8080/remoteEntry.js" ***!
  \************************************************************/
/***/ (function(module) {

"use strict";
module.exports = test@http://localhost:8080/remoteEntry.js;

/***/ }),

Answer 1

我遇到了同样的问题，this similar thread帮助过我。建议删除要使用 test 的包中的 library: {type: "var", name: "dashboards"}。