While working on a website using nextjs-typescript and tailwindcss, I encountered an unusual error message Expression expected.
The terminal also displayed the following:
Unexpected token `div`. Expected jsx identifier
const UseCases = () => {
7 | return (
8 | <div className="relative z-10 bg-gray-100 py-20">
: ^^^
9 | <FadeIntoView>
This is the code in question:
import dataUseCases from "../../data/cases.data"
import FadeIntoView from "../../utils/gsap/fadeIntoView"
import Cases from "./useCases"
const UseCases = () => {
return (
<div className="relative z-10 bg-gray-100 py-20">
<FadeIntoView>
<h2 className="xs:text-8xl text-22vw fill-color pb-7 text-right font-black">Case</h2>
<div>
{dataUseCases.map((case, index) => (<Cases key={case.title + "-" + index} index={index + 1} />))}
</div>
</FadeIntoView>
</div>
)
}
export default UseCases
The file name is index.tsx, located inside src/components/useCase
Tsconfig details:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
I attempted various solutions mentioned at
swc#issue-2237 stack-overflow
Unfortunately, none of them resolved the issue.