当我运行npm start
命令时,我得到这个错误:
Failed to compile.
./src/layouts/BookCheckoutPage/BookCheckoutPage.tsx 131:10
Module parse failed: Unexpected token (131:10)
You may need an appropriate loader to handle this file type.
| columnNumber: 21
| }
> }, book?.img ? /*#__PURE__*/React.createElement("img", {
| src: book?.img,
| width: "226",
这是我的BookCheckoutPage.tsx文件:
import React from "react";
import { useEffect, useState } from "react";
import BookModel from "../../models/BookModel";
import { SpinnerLoading } from "../Utils/SpinnerLoading";
export const BookCheckoutPage = () => {
const [book, setBook] = useState<BookModel>();
const [isLoading, setIsLoading] = useState(true);
const [httpError, setHttpError] = useState(null);
const bookId = (window.location.pathname).split('/')[2];
useEffect(() => {
const fetchBook = async () => {
const baseUrl: string = `http://localhost:8080/api/books/${bookId}`;
const response = await fetch(baseUrl);
if (!response.ok) {
throw new Error('Something went wrong!');
}
const responseJson = await response.json();
const loadedBook: BookModel = {
id: responseJson.id,
title: responseJson.title,
author: responseJson.author,
description: responseJson.description,
copies: responseJson.copies,
copiesAvailable: responseJson.copiesAvailable,
category: responseJson.category,
img: responseJson.img,
};
setBook(loadedBook);
setIsLoading(false);
};
fetchBook().catch((error: any) => {
setIsLoading(false);
setHttpError(error.message);
})
}, []);
if (isLoading) {
return (
<SpinnerLoading />
)
}
if (httpError) {
return (
<div className='container m-5'>
<p>{httpError}</p>
</div>
)
}
return (
<div>
<div className='container d-none d-lg-block'>
<div className='row mt-5'>
<div className='col-sm-2 col-md-2'>
{book?.img ?
<img src={book?.img} width='226' height='349' alt='Book' />
:
<img src={require('./../../Images/BooksImages/book-luv2code-1000.png')} width='226'
height='349' alt='Book' />
}
</div>
<div className='col-4 col-md-4 container'>
<div className='ml-2'>
<h2>{book?.title}</h2>
<h5 className='text-primary'>{book?.author}</h5>
<p className='lead'>{book?.description}</p>
</div>
</div>
</div>
<hr />
</div>
<div className='container d-lg-none mt-5'>
<div className='d-flex justify-content-center align-items-center'>
{book?.img ?
<img src={book?.img} width='226' height='349' alt='Book' />
:
<img src={require('./../../Images/BooksImages/book-luv2code-1000.png')} width='226'
height='349' alt='Book' />
}
</div>
<div className='mt-4'>
<div className='ml-2'>
<h2>{book?.title}</h2>
<h5 className='text-primary'>{book?.author}</h5>
<p className='lead'>{book?.description}</p>
</div>
</div>
<hr />
</div>
</div>
);
}
我搜索了这个问题,很多帖子都说这是一个 typescript 问题,或者是一个tsconfig问题,或者是requre()
方法问题。我100%肯定不是这个问题,因为我已经在我的项目中使用了类似的东西,没有任何错误。比如这个“ReturnBook”。
import React from 'react'
import BookModel from '../../models/BookModel'
export const ReturnBook: React.FC<{book: BookModel}> = (props) => {
return (
<div className="col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-3">
<div className="text-center">
{props.book.img ?
<img
src={props.book.img}
width="151"
height="233"
alt="book"
/>
:
<img
src={require('../../Images/BooksImages/book-luv2code-1000.png')}
width="151"
height="233"
alt="book"
/>
}
<h6 className="mt-2">{props.book.title}</h6>
<p>{props.book.author}</p>
<a className="btn main-color text-white" href="#">
Reserve
</a>
</div>
</div>
)
}
1条答案
按热度按时间jhdbpxl91#
更新看起来我设法编译了它。我需要检查它是否真的工作:)。如果有人卡住了,下面是代码: