React项目导入Tabler包报错：Package path . is not exported

问题背景 #

在React组件FeatureCards.tsx中使用常规方式导入Tabler图标：

import { IconGauge, IconUser, IconCookie } from '@tabler/icons';

触发模块找不到错误：

ERROR in ./src/components/FeatureCards.tsx 6:0-64

Module not found: Error: Package path . is not exported from package /xx/App/node_modules/@tabler/icons (see exports field in /xx/App/node_modules/@tabler/icons/package.json)

查看包的package.json，发现其exports字段仅配置了子路径映射：

"exports": {
  "./*": [
    "./icons/*"
  ]
},

尝试手动添加根路径映射后，又出现新的解析错误，删除重装node_modules也无效，目前通过降级到1.115.0版本临时解决：

npm i @tabler/icons@1.115.0

其他可行解决方案 #

• 单个图标单独导入
  新版本@tabler/icons的exports配置仅允许从具体图标文件路径导入，修改导入语句为：

  import IconGauge from '@tabler/icons/icons/icon-gauge';
  import IconUser from '@tabler/icons/icons/icon-user';
  import IconCookie from '@tabler/icons/icons/icon-cookie';
  

  这种方式完全符合当前包的导出规则，无需修改配置或降级。

• 切换到官方React适配包
  官方提供了专为React优化的@tabler/icons-react包，支持批量导入语法：

  1. 安装适配包：

     npm install @tabler/icons-react
     

  2. 替换导入语句：

     import { IconGauge, IconUser, IconCookie } from '@tabler/icons-react';
     

  该包适配React组件场景，能直接沿用你习惯的批量导入方式。

• 配置webpack别名映射
  若坚持使用原导入语法，可在webpack配置中添加别名，将@tabler/icons指向包内的icons目录：

  const path = require('path');
  
  module.exports = {
    // ...其他webpack配置
    resolve: {
      alias: {
        '@tabler/icons': path.resolve(__dirname, 'node_modules/@tabler/icons/icons')
      }
    }
  };
  

  配置后即可继续使用import { ... } from '@tabler/icons';的导入方式。

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