0
./src/components/BookDetails/bookdetails.jsx 147:14
Module parse failed: Unexpected token (147:14)
You may need an appropriate loader to handle this file type.
|     }
|   }, /*#__PURE__*/React.createElement("img", {

>     src: book?.cover_img,
|     alt: "cover img",
|     __self: _this,

Hi everyone! I've tried googling this issue, modifying my webpack.config.js file, modifying the "babel", removed node modules & package-lock.json & re-install npm but I keep getting this error.

I think the "?" right after the "book" might be triggering the error, I'm not sure. Any help would be great!!!

The entire code for this is here:

import React, {useState, useEffect} from 'react';
import { useParams } from 'react-router-dom';
import Loading from "../Loader/loader";
import coverImg from "../../images/notfound.jpg";
import "./bookdetails.css";
import {FaArrowLeft} from "react-icons/fa";
import { useNavigate } from 'react-router-dom';

const URL = "https://openlibrary.org/works/";

const Bookdetails = () => {
  const {id} = useParams();
  const [loading, setLoading] = useState(false);
  const [book, setBook] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    setLoading(true);
    async function getBookDetails(){
      try{
        const response = await fetch(`${URL}${id}.json`);
        const data = await response.json();
        if(data){
          const {description, title, covers, subject_places, subject_times, subjects} = data;
          const newBook = {
            description: description ? description.value : "No description found",
            title: title,
            cover_img: covers ? `https://covers.openlibrary.org/b/id/${covers[0]}-L.jpg` : coverImg,
            subject_places: subject_places ? subject_places.join(", ") : "No subject places found",
            subject_times: subject_times ? subject_times.join(", ") : "No subject times found",
            subjects: subjects ? subjects.join(", ") : "No subjects found"
          };
          setBook(newBook);
        } else{
          setBook(null);
        }
        setLoading(false);
      } catch(error){
        console.log(error);
        setLoading(false);
      }
    }
    getBookDetails();
  }, [id]);

  if (loading) return <Loading/>;


  return (
    <section className='book-details'>
      <div className='container'>
        <button type='button' className='flex flex-c back-btn' onClick={() => navigate("/book")}>
          <FaArrowLeft size = {22} />
          <span className='fs-18 fw-6'>Go back</span>
        </button>

        <div className='book-details-content grid'>
          <div className='book-details-img'>
          <img src = {book?.cover_img} alt = "cover img"/>
          </div>
          <div className='book-details-info'>
            <div className='book-details-item title'>
              <span className='fw-6 fs-24'>{book.title}</span>
            </div>
            <div className='book-details-item description'>
              <span>{book?.description}</span>
            </div>
            <div className='book-details-item'>
              <span className='fw-6'>Subject Places: </span>
              <span className='text-italic'>{book?.subject_places}</span>
            </div>
            <div className='book-details-item'>
              <span className='fw-6'>Subject Times: </span>
              <span className='text-italic'>{book?.subject_times}</span>
            </div>
            <div className='book-details-item'>
              <span className='fw-6'>Subjects : </span>
              <span>{book?.subjects}</span>
            </div>

          </div>
        </div>
      </div>
    </section>
  )
}

export default Bookdetails

And my package.json looks like this:

{
  "name": "book-app",
  "version": "0.1.0",
  "private": true,
"resolutions": {
    "acorn": "8.0.1"
},
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "file-loader": "^6.2.0",
    "npm-force-resolutions": "^0.0.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.1",
    "react-scripts": "^2.1.3",
    "url-loader": "^4.1.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "preinstall": "npx npm-force-resolutions"

  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

bana2544
  • 1
  • 1
  • What version of Node are you running? – Phil Feb 10 '23 at 01:33
  • im using v19.6.0 – bana2544 Feb 10 '23 at 01:35
  • 1
    Relevant Webpack issue on Github ~ https://github.com/webpack/webpack/issues/10227 – Phil Feb 10 '23 at 01:35
  • 1
    and are you using the latest versions of babel, webpack, etc? – Mike 'Pomax' Kamermans Feb 10 '23 at 01:38
  • @Phil I took a look at that when I first encountered my issue, didn't fix my errors :( – bana2544 Feb 10 '23 at 01:42
  • @Mike I believe so! I've removed the node modules & package.json and re-installed npm too and still have this issue – bana2544 Feb 10 '23 at 01:42
  • @bana2544 that doesn't answer the question. Which versions are you actually using? It would help if you could [edit] your question to include the `dependencies` / `devDependencies` from your `package.json` – Phil Feb 10 '23 at 01:44
  • @Phil my bad! i'm new to all of this webpack configuration stuff..my first time even coding with React! I edited my post with what my package.json looks like! – bana2544 Feb 10 '23 at 01:47
  • Your `react-scripts` library is **seriously** out-of-date. The current version is 5.0.1. This is the library that brings in Webpack – Phil Feb 10 '23 at 01:48
  • @Phil i see...would just changing it to 5.0.1 be okay or would I need to install something? – bana2544 Feb 10 '23 at 01:49
  • Should be fine to just update in-place. In general I'd advise creating projects using a bootstrap / template like [Vite](https://vitejs.dev/guide/) or [Create React App](https://create-react-app.dev/docs/getting-started) – Phil Feb 10 '23 at 01:51
  • @Phil I used the second link to create this react project! Not sure why it was so out of date.. :( but I just changed teh react-scripts to 5.0.1 but I'm still getting the same error as before, I guess that wasn't the issue? – bana2544 Feb 10 '23 at 01:54
  • You need to change the version in `package.json`, run `npm install` then try building again – Phil Feb 10 '23 at 01:55
  • 1
    @Phil omg it worked!!!! error went away and everything is working as planned!!! thank you so much Phil!!!! Can't believe the react-script being an old version caused all of this.... thank you again!!! for future reference, is there anything I can do to avoid all of this when I begin a new react project? I used that 2nd link you posted but I've actually had so many issues with the packages and such since doing this current project... – bana2544 Feb 10 '23 at 02:02
  • Only thing I can think of is your `create-react-app` is also out-of-date. Next time you want to use it, try `npx create-react-app@latest` or (my preference) try out Vite. There's also a new builder from Vercel that looks promising - [Turbopack](https://vercel.com/blog/turbopack) – Phil Feb 10 '23 at 02:04

0 Answers0