React Parcel项目中react-chartjs-2安装后无法解析的问题求助

问题描述 #

我在React Parcel项目中执行以下命令安装依赖：

npm install --save chart.js react-chartjs-2

安装完成后执行npm start启动项目，出现错误：

@parcel/core: Failed to resolve 'react-chartjs-2' from './src/pages/dashboard/quiz-detail.js'

当前项目的package.json内容如下：

{
  "name": "quizcopy",
  "version": "1.0.0",
  "homepage": ".",
  "description": "",
  "source": "/src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.7.0",
    "autoprefixer": "^10.4.8",
    "buffer": "^6.0.3",
    "parcel": "^2.7.0",
    "postcss": "^8.4.16",
    "process": "^0.11.10",
    "sass": "^1.54.9",
    "tailwindcss": "^3.1.8"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.0",
    "@heroicons/react": "^2.0.10",
    "axios": "^0.27.2",
    "chart.js": "^4.1.1",
    "crypto-js": "^4.1.1",
    "dotenv": "^16.0.2",
    "js-cookie": "^3.0.1",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.1.0",
    "react-datetime-picker": "^4.0.1",
    "react-dom": "^18.2.0",
    "react-export-table-to-excel": "^1.0.6",
    "react-google-recaptcha-v3": "^1.10.0",
    "react-hot-toast": "^2.4.0",
    "react-image-file-resizer": "^0.4.8",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.3.0",
    "react-transition-group": "^4.4.5",
    "read-excel-file": "^5.5.3",
    "swr": "^1.3.0"
  }
}

解决方案 #

• 清理Parcel缓存并重启项目
  Parcel可能缓存了旧的依赖解析结果，执行以下命令：

  rm -rf .parcel-cache node_modules/.cache
  npm start
  

• 检查导入语句是否正确
  确认quiz-detail.js中的导入路径和方式是否符合react-chartjs-2 v5+的要求：

  // 正确导入组件
  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);
  

  避免拼写错误包名或使用错误的相对路径。

• 重新安装依赖
  移除现有依赖文件后重新安装，确保依赖完整：

  rm -rf node_modules package-lock.json
  npm install
  npm start
  

• 检查Parcel自定义配置
  如果项目中有.parcelrc文件，确认其中没有自定义解析规则阻止react-chartjs-2的识别，默认配置下Parcel可正常解析npm包。

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