./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"
]
}
}