如何让Next.js的Webpack强制将React导入解析到指定外部依赖？

我们正在从旧项目app-a迁移到Next.js项目next-app，需要复用app-a中的组件，但两者依赖的React版本不一致：app-a使用React 17.x.x，next-app使用React 18.x.x。已启用Next.js的experimental.externalDir配置允许跨目录导入，但常规Webpack别名无法让app-a组件中的import { useEffect } from 'react'解析到next-app/node_modules下的React 18，而是会优先加载根目录node_modules里的React 17。

下面是两种可行的解决办法：

方法一：强制Webpack优先解析当前项目的React包 #

在next-app/next.config.js中修改Webpack配置，通过别名和模块查找顺序确保所有React导入都指向next-app内的版本：

// next-app/next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    externalDir: true,
  },
  webpack: (config) => {
    // 直接指定react和react-dom的路径为当前项目的依赖
    config.resolve.alias['react'] = require.resolve('react');
    config.resolve.alias['react-dom'] = require.resolve('react-dom');
    
    // 让Webpack先从当前项目的node_modules查找模块，覆盖默认的目录优先级
    config.resolve.modules.unshift(config.context + '/node_modules');
    
    return config;
  },
};

module.exports = nextConfig;

方法二：用Webpack插件替换所有React模块请求 #

如果方法一不生效，可以使用NormalModuleReplacementPlugin直接拦截所有React相关的模块请求，强制替换为next-app的版本：

// next-app/next.config.js
const webpack = require('webpack');

const nextConfig = {
  experimental: {
    externalDir: true,
  },
  webpack: (config) => {
    config.plugins.push(
      // 替换所有react模块请求
      new webpack.NormalModuleReplacementPlugin(
        /^react$/,
        require.resolve('react')
      ),
      // 同时替换react-dom，避免版本不一致
      new webpack.NormalModuleReplacementPlugin(
        /^react-dom$/,
        require.resolve('react-dom')
      )
    );
    return config;
  },
};

module.exports = nextConfig;

验证配置是否生效 #

在component-a中添加版本打印代码，启动next-app后查看控制台输出，确认是否为React 18.x.x：

// app-a/component-a
import React from 'react';

export function ComponentA() {
  console.log('当前React版本:', React.version);
  // 原组件代码...
  return <></>;
}

内容的提问来源于stack exchange，提问作者Sanborn