I'm trying to set a project using Module Federation but it breaks when I try to load the component. Whenever I run the host project with the component imported it throws me "Uncaught SyntaxError: Invalid or unexpected token". I even tried using React.lazy to import the component

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

which is declared in the module federation config of host as test: "test@http://localhost:8080/remoteEntry.js",

And on the other remote project it is declared as

 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"],
    },
  },
})

The error("Uncaught SyntaxError: Invalid or unexpected token") is located in this line:

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

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

/***/ }),