Next.js 13 + TS项目中插件式组件重写的Webpack别名失效问题求助

大家好，我在开发一个基于Next.js 13的模块化项目时，卡在了插件式组件重写的问题上，折腾了好久都没解决，想请教下社区里的朋友有没有类似的经验？

项目结构与需求 #

我们的项目是这样组织的：

/components
  /singleNews
/plugins
  /social-share
    /package.json
    /components
      /singleNews

核心需求很明确：

• 基础组件都放在/components目录下
• 各个插件可以在自己的package.json里声明overrides字段，实现对指定核心组件的替换
• 举个例子，项目里有个NewsCredit.tsx组件，常规导入是：

  import NewsCredit from "@/components/singleNews/NewsCredit";
  

  我们希望social-share插件能把这个导入替换成插件内部的版本，所以在插件的package.json里写了：

  "overrides": {
    "@/components/singleNews/NewsCredit": "./components/singleNews/NewsCredit.tsx"
  }
  

  最终要实现的效果是：原来的导入语句，实际加载的是@/plugins/social-share/components/singleNews/NewsCredit.tsx。

目前的实现方案（next.config.js） #

我的思路是在next.config.js里动态收集所有插件的overrides配置，然后转成Webpack的别名来实现路径替换。具体代码如下：

const path = require("path");
const fs = require("fs");

const pluginDir = path.resolve(__dirname, "plugins");
const pluginFolders = fs.readdirSync(pluginDir);
let overrides = {};

pluginFolders.forEach((plugin_folder) => {
  const pluginJsonPath = path.join(pluginDir, plugin_folder, 'package.json');
  if (fs.existsSync(pluginJsonPath)) {
    const pluginConfig = JSON.parse(fs.readFileSync(pluginJsonPath, "utf8"));
    if (pluginConfig.overrides) overrides = { ...overrides, ...pluginConfig.overrides };
    
    const modifiedEntries = Object.entries(overrides).map(([alias, overridePath]) => 
      [alias, path.join(pluginDir, plugin_folder, overridePath)]
    );
    overrides = Object.fromEntries(modifiedEntries);
  }
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    Object.entries(overrides).forEach(([alias, overridePath]) => {
      config.resolve.extensions.push(".tsx", ".ts");
      config.resolve.alias[alias] = path.resolve(__dirname, overridePath);
    });
    return config;
  },
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "**" },
      { protocol: "http", hostname: "**" },
    ],
    domains: ["*"],
  },
};

module.exports = nextConfig;

逻辑很简单：遍历所有插件目录，读取每个插件的package.json，提取overrides配置并合并，最后把这些配置转成Webpack的路径别名，让Webpack在解析导入时替换路径。

遇到的问题 #

不管怎么调整，Webpack的别名就是不生效！原本应该被替换的组件导入，始终还是指向/components下的原始版本，完全没加载插件里的组件。

已经尝试的调试步骤 #

为了定位问题，我已经试过这些方法，但都没解决：

• 清除Next.js缓存：执行rm -rf .next后重新构建
• 检查是否存在重复模块导入或声明：确认没有重复定义导致的冲突
• 排除热重载影响：清除缓存后完全重新构建，不是用热重载启动
• 检查tsconfig.json：里面没有会影响路径解析的配置，也没修改过相关内容

想请教下各位，有没有人在Next.js项目里实现过这种动态插件式的组件重写？有没有不用eject或者深度修改Webpack的干净方案？麻烦分享下经验，谢谢大家！

内容来源于stack exchange