如何解决react-gauge-chart包依赖问题及模块找不到报错原因

First, let's recap the errors you're seeing for context:

Local environment error:
Failed to compile. ./src/views/home/CorrectiveMaintainanceReport.jsx Module not found: Can't resolve 'react-gauge-chart' in '/Users/kongwenyao/Documents/GitLab/wefix/src/views/home'

Codesandbox error:
Error Could not fetch dependencies, please try again in a couple seconds: Something went wrong while packaging the dependency react-gauge-chart@0.1.2: ENOENT: no such file or directory, scandir '/tmp/3739059402/node_modules/react-gauge-chart/dist'

Your relevant dependencies from package.json:

"dependencies": {
  "axios": "^0.18.0",
  "chart.js": "2.7.3",
  "classnames": "2.2.6",
  "eslint-config-google": "^0.12.0",
  "moment": "2.24.0",
  "node-sass": "4.11.0",
  "nouislider": "13.1.1",
  "react": "16.8.4",
  "react-chartjs-2": "2.7.4",
  "react-copy-to-clipboard": "5.0.1",
  "react-datetime": "2.16.3",
  "react-dom": "16.8.4",
  "react-gauge-chart": "^0.1.2",
  "react-google-maps": "9.4.5",
  "react-router-dom": "4.3.1",
  "react-scripts": "2.1.8",
  "reactstrap": "7.1.0"
}

Root Cause #

The core problem here is a publishing bug in the react-gauge-chart@0.1.2 npm package. This version was released without including the compiled dist directory—this is the folder that contains the actual usable code webpack (and Codesandbox's dependency resolver) looks for when you import the module. Both your local environment and Codesandbox fail because they can't locate the necessary build files to resolve the module.

Solutions #

Here are the most practical fixes, ordered by recommendation:

1. Upgrade to the Latest Stable Version #

This is the simplest and most reliable fix. The publishing issue in 0.1.2 was resolved in subsequent releases, which also include bug fixes and improvements. Run this command to upgrade:

npm install react-gauge-chart@latest --save
# Or if you use yarn:
yarn add react-gauge-chart@latest

To ensure no leftover cache or dependency conflicts, follow up with these steps:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

2. Manual Build (If You Must Stick to 0.1.2) #

If you absolutely need to use version 0.1.2 for specific reasons, you'll have to manually compile the package locally:

• Clone the official react-gauge-chart repository
• Check out the commit corresponding to version 0.1.2
• Run npm install then npm run build to generate the missing dist directory
• Copy the compiled dist folder into your project's node_modules/react-gauge-chart directory

Note: This is not recommended long-term—it's error-prone and you'll miss out on updates from newer versions.

Verification #

After applying either fix, test importing the module again in your CorrectiveMaintainanceReport.jsx file:

import GaugeChart from 'react-gauge-chart'

Your build should now complete without the "module not found" error.

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