NextJS NPM Error Failed to compile Import trace for requested module: Build Process Error npm ERR! Fixed with three solutions

Error

Failed to compile

./src/components/card/Card.tsx:4:0

Module not found: Can't resolve 'react-star-rating-component'

  2 | import Image from "next/image";

  3 | import Link from "next/link";

> 4 | import StarRatingComponent from "react-star-rating-component";

  5 | import { Product } from "@/types/products";

  6 | import { urlForImage } from "@/lib/sanityClient";

  7 | import CardActions from "./CardActions";

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:

./src/components/productList/ProductList.tsx

This error occurred during the build process and can only be dismissed by fixing the error.

NextJS NPM Error

Solution

The error message indicates that the module react-star-rating-component could not be found. It seems that the package is not installed in your project, which is causing the error during the build process.

To resolve this issue, you can follow these steps:

Make sure you have Node.js and npm installed on your machine.

Open your project's root directory in the terminal.

Run the following command to install the react-star-rating-component package:

npm install react-star-rating-component

Wait for the installation to complete. npm will download and install the package along with its dependencies.

Once the installation is finished, try running your project again. The error should no longer occur, as the react-star-rating-component package is now installed and available for use.

Make sure to also check if the package is required in any other files within your project and install any other missing packages if necessary.

If you still encounter any issues or error messages, please provide the complete error message or any additional details for further assistance.

If it gives still problem and give error like this

npm ERR! code ERESOLVE

npm ERR! ERESOLVE unable to resolve dependency tree

npm ERR!

npm ERR! While resolving: hackathone1@0.1.0

npm ERR! Found: react@18.2.0

npm ERR! node_modules/react

npm ERR!   react@"18.2.0" from the root project

npm ERR!

npm ERR! Could not resolve dependency:

npm ERR! peer react@"^16.2.0" from react-star-rating-component@1.4.1

npm ERR! node_modules/react-star-rating-component

npm ERR!   react-star-rating-component@"*" from the root project

npm ERR!

npm ERR! Fix the upstream dependency conflict, or retry

npm ERR! this command with --force or --legacy-peer-deps

npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR!

npm ERR!

npm ERR! For a full report see:

npm ERR! C:\Users\Hamada Salim G Trd\AppData\Local\npm-cache\_logs\2023-06-29T08_47_57_302Z-eresolve-report.txt      

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\Hamada Salim G Trd\AppData\Local\npm-cache\_logs\2023-06-29T08_47_57_302Z-debug-0.log"

 The error message you provided suggests that there is a dependency conflict between the react version in your project (18.2.0) and the required peer dependency of react-star-rating-component (^16.2.0). This conflict prevents the package from being resolved and installed successfully.

To resolve this issue, you have a few options:

1.  Update the version of react-star-rating-component to a version that is compatible with React 18. You can check the package's documentation or GitHub repository to see if there is a newer version available that supports React 18. If so, update the package version in your project's package.json file and re-run the installation command.

2. Use the --legacy-peer-deps flag when running the installation command. This flag allows npm to install packages even when there are peer dependency conflicts. Run the following command:

   npm install react-star-rating-component --legacy-peer-deps

   Note that using --legacy-peer-deps may lead to potential compatibility issues, so it's recommended to try option 1 first.

3. Manually resolve the dependency conflict by updating the required version of react-star-rating-component to match the version of React in your project. You can do this by modifying the package.json file and specifying the version explicitly. For example:

   
   

   "dependencies": {

     "react-star-rating-component": "^18.2.0"

   }

After making the change, run npm install again to install the package.

Try one of these options and see if it resolves the issue. If you encounter any further errors or need additional assistance, please let me know.

Want to Learn  Next.js, TypeScript, Tailwind CSS then watch this video https://youtu.be/rftadFuDmC8

Learn to Build a Calculator App with Next.js, TypeScript, Tailwind CSS, and Deploy on Vercel