React构建报错：无法解析apexcharts.common模块如何解决

构建抛出Can't resolve 'apexcharts/dist/apexcharts.common'错误，本质是react-apexcharts和其必须的核心依赖apexcharts版本不匹配：你当前安装的react-apexcharts版本会在构建时读取apexcharts包下dist目录的commonjs格式产物，但本地安装的apexcharts要么未安装，要么版本过高/过低调整了产物路径，导致模块解析失败，该错误发生在依赖解析阶段，无法通过构建忽略配置跳过。

按顺序操作即可修复：

• 先补装核心依赖：绝大多数该错误的诱因是只安装了react-apexcharts封装包，漏装了核心库apexcharts。根据你用的包管理器在项目根目录执行安装命令：

  # npm 用户
  npm install apexcharts --save
  
  # yarn 用户
  yarn add apexcharts
  
  # pnpm 用户
  pnpm add apexcharts
  

  装完重启构建服务，如果还报错继续下一步。
• 安装兼容的固定版本：如果已经装过apexcharts仍报错，就是两个包版本不对应，先卸载现有冲突版本：

  # npm 用户
  npm uninstall react-apexcharts apexcharts
  
  # yarn 用户
  yarn remove react-apexcharts apexcharts
  
  # pnpm 用户
  pnpm remove react-apexcharts apexcharts
  

  卸载完成后安装经过验证的兼容版本组合：

  # npm 用户
  npm install apexcharts@3.36.3 react-apexcharts@1.4.0 --save
  
  # yarn 用户
  yarn add apexcharts@3.36.3 react-apexcharts@1.4.0
  
  # pnpm 用户
  pnpm add apexcharts@3.36.3 react-apexcharts@1.4.0
  

• 清理缓存重启服务：删除项目根目录下node_modules/.cache文件夹，清除旧的依赖解析缓存，再重新执行npm run start/npm run build等命令即可正常构建。

  如果你使用Create React App脚手架，可直接执行带缓存重置参数的启动命令跳过手动删缓存步骤：npm start --reset-cache

如果你没有使用官方脚手架，是自定义webpack/vite配置的项目，做完上述步骤仍报错，检查构建配置的模块解析规则：

• webpack项目确认resolve.extensions配置中包含.js后缀，避免缺省后缀时无法解析js文件：

  // webpack.config.js 配置示例
  module.exports = {
    // 其余配置省略
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'] // 确保.js在解析后缀列表中
    }
  }
  

• vite项目无需额外配置，固定上述版本后重启服务即可正常解析。

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