CODEWITHSUNDEEP
typescriptnext.jsreact-typescript
Karthik S
Karthik S

Reputation: 279

TypeScript Error : Unexpected token `div`. Expected jsx identifier

I was building a website based on nextjs-typescript and tailwindcss

and I am encountering this weird error Expression expected.

screenshot of error

I am also getting this in the terminal:

  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 my code

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

and the file is named index.tsx and is located inside src/components/useCase

Tsconfig:

{
  "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 tried a few suggestions from

swc#issue-2237 stack-overflow

But none of them seem to work here

Upvotes: 26

Views: 52171

Answers (6)

Omid Moghadas
Omid Moghadas

Reputation: 347

First of all check the typeof dataUseCases in your code and It must be an array.

You can try <></> and maybe fixed.

But this error happened when you have mistakes on your map and not actually related to your JSX okay?!

Upvotes: 0

Zakariae BEN ALLAL
Zakariae BEN ALLAL

Reputation: 92

it look like you run yarn start or npm run start instead yarn dev or npm run dev.

You try to run build dist on env dev that transpilation not executed before to build dist directory.

Upvotes: -1

Sergii Sechka
Sergii Sechka

Reputation: 639

enter image description here

For me it says - "Unexpected token header", but the actual problem in missing parameter on a property

Upvotes: 9

Andre Toledo Gama
Andre Toledo Gama

Reputation: 152

Put your code inside

<></>

like this:

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>
    </>
  )
}

Upvotes: -1

Ahmed Sbai
Ahmed Sbai

Reputation: 16169

break byte case catch char class* const continue debugger default delete do double else enum* eval export* extends* false final finally float for function goto if implements import* in instanceof int interface let* long native new null package private protected public return short static super* switch synchronized this throw throws transient true try typeof var void abstract arguments await* boolean volatile while with yield

all these keywords are reserved in javaScript you cannot use them as variables, labels, or function names

Upvotes: 2

Mohammad
Mohammad

Reputation: 780

case is a reserved keyword in javascript change that variable in your map to something else

Upvotes: 5

Related Questions