create-react-app中动态路径require找不到模块如何配置？

你遇到的报错是webpack静态依赖扫描机制导致的：webpack在编译阶段会扫描所有require路径，纯变量拼接的路径无法被webpack识别到所属的文件范围，webpack就不会把对应的模块打包进最终产物，运行时自然找不到模块。

方案1：无配置修复（优先推荐） #

不需要修改任何CRA配置，只需要给动态require添加至少一段静态路径前缀，让webpack可以识别到需要扫描的目录范围，自动把该目录下所有匹配的模块提前打包：
假设你的所有品牌模块都存放在src/brands/目录下，把导入代码改成如下形式即可：

// 静态前缀`../brands/`会让webpack扫描该目录下所有`*/componentText`文件
const { COMPONENT_TEXT } = require(`../brands/${brand}/componentText`);

如果是要读取node_modules下的品牌私有包，也可以写成：

const { COMPONENT_TEXT } = require(`./../../../node_modules/${brand}/componentText`);

方案2：用require.context预加载所有匹配模块 #

如果你的动态路径规则更复杂，可以提前用require.context预加载所有可能用到的模块，运行时直接按品牌取值：

// 三个参数分别为：扫描根目录、是否扫描子目录、匹配文件的正则
const getComponentText = require.context('../brands', true, /\/componentText\.(js|ts)$/);
const { COMPONENT_TEXT } = getComponentText(`./${brand}/componentText.js`);

方案3：修改CRA配置适配纯变量路径 #

如果必须用${brand}/componentText这种无静态前缀的导入形式，需要修改CRA的webpack配置，步骤如下：

1. 安装配置修改工具

npm install react-app-rewired customize-cra --save-dev

2. 修改package.json中的启动脚本，把所有react-scripts替换为react-app-rewired

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

3. 项目根目录新建config-overrides.js，添加如下配置，把所有你会用到的品牌名提前告诉webpack：

const { override, addWebpackPlugin } = require('customize-cra');
const webpack = require('webpack');

// 填入所有可能用到的品牌名
const AVAILABLE_BRANDS = ['afs', 'brand2', 'brand3'];

module.exports = override(
  addWebpackPlugin(
    new webpack.ContextReplacementPlugin(
      // 匹配你的动态导入上下文
      /src\/common\/components\/NavItem/,
      // 告诉webpack需要打包的模块范围
      new RegExp(`(${AVAILABLE_BRANDS.join('|')})/componentText$`)
    )
  )
);

• 如果品牌模块是node_modules下的私有包，请提前把所有可能用到的品牌包安装到项目依赖中
• 如果选择eject修改配置，eject后直接在config/webpack.config.js的plugins数组中添加上述ContextReplacementPlugin配置即可，不需要安装react-app-rewired相关依赖

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