无法使用模块延迟插件解析 nextJS 应用程序中的模块路径

Question

我正在使用

module-federation/nextjs-mf

webpack plugin，它使我们能够使用微前端架构。

根据官方文档，基于这个例子，我们可以在远程和主机应用程序之间共享组件。

上面的示例仅使用开箱即用的 nextjs 代码就可以很好地工作。

实际上我正在尝试实现这一目标，主机应用程序和

n

远程应用程序都使用：

• NextJS

• module-federation/nextjs-mf

  插件
• 打字稿

如您所见，我正在使用 2 个以上的 nextjs 应用程序，远程应用程序可以成功共享组件，但是，主机应用程序由于此错误而中断：

其实施：

import dynamic from "next/dynamic"
const NextRemoteComponent = dynamic(
  () => import("remote_finances/next-remote-component"),
  { ssr: false }
)

与其他应用程序不同，这个

host

应用程序使用“不同的”

next.config.js

配置：

module.exports = {
  webpack5: true,
  webpack(config, options) {
    const { webpack, isServer } = options;
    config.experiments = { topLevelAwait: true };

    config.module.rules.push({
      test: /_app.js/,
      loader: '@module-federation/nextjs-mf/lib/federation-loader.js',
    });

    config.plugins.push(
      new webpack.container.ModuleFederationPlugin({
        remotes: {
          remote_finances: "remote_finances@http://localhost:8081/_next/static/chunks/remoteEntry.js",
          remote: 'remote@http://localhost:8081/_next/static/chunks/remoteEntry.js',
        },
        shared: {
          react: {
            singleton: true,
            eager: true,
            requiredVersion: false,
          },
        },
      }),
    );
    return config;
  },
  // nextJS config
  reactStrictMode: true,
  experimental: {
    outputStandalone: true
  },
  env: {
    BASE_URL : `https://qa-core-api.nordhen.com`,
  },
};

我尝试了几乎所有的事情，改变并尝试了很多

.eslintrc

-

.eslintrc.json

配置、软件包，但不知道到底是不是因为：

• 打字稿
• 棉绒
• Webpack

如果您需要有关代码或其实现的任何额外信息，您可以询问。 感谢您的宝贵时间，我很感激。

Answer 1

尝试用这两行绕过 eslint（如果您使用的是 vs code）。

它对我有用。

import dynamic from "next/dynamic"
const NextRemoteComponent = dynamic(
  // @ts-ignore
  // eslint-disable-next-line
  () => import("remote_finances/next-remote-component"),
  { ssr: false }
)

Answer 2

尝试将此文件夹添加到 src 目录中。

--src
---types
----remote-app.ts.d (can give any name)

在该文件中，定义该组件的类型

declare module 'remote_finances/next-remote-component' {
  const Component: React.FC;
  export default Component;
}