NX React Monorepo资源无法解析问题求助

问题描述 #

开发包含多库、2个应用的NX单体仓库，资源集中存储在libs/shared/assets/src/assets/images下，期望在库和应用中通过/assets/images/xxx路径引入SVG、PNG等资源，但执行nx run funnel:build --verbose时，所有资源均报Module not found: Error: Can't resolve '/assets/images/xxx'错误。

当前配置 #

• NX版本：15.6.0
• React应用基于Webpack构建
• 已在project.json配置资源输入输出路径
• Webpack已集成file-loader、url-loader和svgr支持

已尝试无效方案 #

• Angular资源引入功能
• copy-webpack-plugin复制资源
• tsconfig路径映射
• 资源存放在依赖目录旁（可行但需重复存储，不符合工作流）

可行解决方案 #

1. 配置Webpack别名映射绝对路径 #

在应用的webpack.config.js（或project.json的webpack配置段）中添加resolve.alias，将/assets/images指向实际共享资源目录：

const path = require('path');

module.exports = (config) => {
  config.resolve.alias['/assets/images'] = path.resolve(__dirname, '../../libs/shared/assets/src/assets/images');
  return config;
};

注意根据项目结构调整路径，确保指向正确的资源根目录。

2. 配置构建时资源复制规则 #

在应用的project.json的build目标中添加assets配置，将共享资源复制到构建输出的对应目录：

{
  "targets": {
    "build": {
      "options": {
        "assets": [
          {
            "input": "libs/shared/assets/src/assets/images",
            "output": "assets/images",
            "glob": "**/*"
          }
        ]
      }
    }
  }
}

构建后资源会被同步到dist/apps/funnel/assets/images，保证运行时能通过绝对路径访问。

3. 可选：使用tsconfig路径映射+Webpack别名 #

如果绝对路径仍有问题，可在tsconfig.base.json中添加路径映射：

{
  "compilerOptions": {
    "paths": {
      "@assets/images/*": ["libs/shared/assets/src/assets/images/*"]
    }
  }
}

代码中通过import Logo from '@assets/images/logo.png'引入，同时在Webpack配置中同步添加该别名：

config.resolve.alias['@assets/images'] = path.resolve(__dirname, '../../libs/shared/assets/src/assets/images');

这种方式更符合TS项目的路径规范，开发和构建阶段都能正确解析。

4. 确保SVGR适配别名配置 #

若引入SVG资源，需保证svgr-loader能识别别名，调整Webpack规则：

module.exports = (config) => {
  // 找到SVG对应的规则并修改loader
  const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
  svgRule.use = [
    { loader: '@svgr/webpack', options: { icon: true } },
    { loader: 'url-loader' }
  ];
  
  // 保留别名配置
  config.resolve.alias['/assets/images'] = path.resolve(__dirname, '../../libs/shared/assets/src/assets/images');
  return config;
};

完成配置后重新执行nx run funnel:build --verbose，验证资源是否能被正确解析和构建。

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