在Remix中使用chart.js与react-chartjs-2报错：模块未找到

1. 彻底清理依赖后重装 #

• 直接删除项目根目录的node_modules文件夹，或用命令：
  • Mac/Linux：rm -rf node_modules
  • Windows：rd /s /q node_modules
• 清除yarn缓存：yarn cache clean
• 重新执行yarn install
• 安装完成后务必检查node_modules里是否存在react-chartjs-2和chart.js文件夹，同时确认版本匹配：react-chartjs-2 v4+要求chart.js v3+，v3版本则对应chart.js v2，版本不兼容也会导致解析失败。

2. 核对导入语法是否符合版本要求 #

最新版（v4+）的react-chartjs-2采用ES模块，正确导入方式如下：

// 导入图表组件
import { Line, Bar } from 'react-chartjs-2';
// 必须导入并注册chart.js的核心模块
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

如果是旧版（v3及以下），导入路径需改为react-chartjs-2/dist/react-chartjs-2，但优先建议升级到兼容的新版本。

3. 检查项目路径别名配置 #

如果项目使用了webpack、Vite或SSR框架的路径别名，确认tsconfig.json/jsconfig.json中的paths字段没有错误映射react-chartjs-2到其他路径，导致依赖解析失败。

4. 重置包管理器锁文件 #

• 删除yarn.lock文件（npm用户删除package-lock.json）
• 重新执行yarn install，避免锁文件中存在的版本冲突或缓存残留问题
• 同时检查package.json的dependencies字段，确保react-chartjs-2和chart.js都在列表中，且版本号没有file:/link:这类本地引用前缀。

5. SSR框架（Remix/Next.js）专属配置 #

Remix项目 #

在remix.config.js中确保同时配置serverDependenciesToBundle和serverModuleFormat：

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  serverDependenciesToBundle: ['react-chartjs-2', 'chart.js'],
  serverModuleFormat: 'esm',
};

Next.js项目 #

在next.config.js中添加转译配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-chartjs-2', 'chart.js'],
};

module.exports = nextConfig;

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