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

Question

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

What happens if you surround the <div> (and all the return value) in <> and </>? — ruffin
– ruffin, Commented Jan 23, 2023 at 22:17
You've mashed two completely different error messages which should be two questions into a single question here. You should expect your question to be closed as "Needs more focus". You should edit it to focus on one problem, then consider asking another question about your other problem. — Quentin
– Quentin, Commented Jan 23, 2023 at 22:22

Sergii Sechka · Accepted Answer · 2023-08-18 23:43:02Z

12

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

answered Aug 18, 2023 at 23:43

Sergii Sechka

6891 gold badge6 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rahul Bali Over a year ago

haha, nextjs error reporting is amusing.

Neil Over a year ago

It's funny I've searched for this issue separately twice and come to this same answer! @next / react really need to improve reporting.

realtebo Over a year ago

my case: added <hr> instead of <hr />

Mohammad · Accepted Answer · 2023-01-23 22:31:50Z

6

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

answered Jan 23, 2023 at 22:31

Mohammad

8001 gold badge8 silver badges21 bronze badges

1 Comment

KHB Over a year ago

the "Expected JSX Identifier" error is actually kind of a misnomer... the JSX component is there, but has an error within it... so the compiler is confused and thinks the jsx isn't even there (because it can't identify it as a jsx component) So once you remove the former issue, the latter should go away. I have these "JSX Identifer" errors when i add a prop with an empty value or have an egregious typo somewhere in the code (an errant symbol somewhere)

Ahmed Sbai · Accepted Answer · 2023-01-24 02:12:47Z

2

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

edited Jan 24, 2023 at 2:12

answered Jan 24, 2023 at 0:29

Ahmed Sbai

16.5k11 gold badges34 silver badges54 bronze badges

Comments

Omid Moghadas · Accepted Answer · 2024-07-18 09:33:33Z

0

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?!

answered Jul 18, 2024 at 9:33

Omid Moghadas

3473 silver badges9 bronze badges

Comments

Andre Toledo Gama · Accepted Answer · 2023-04-01 17:47:42Z

-1

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

answered Apr 1, 2023 at 17:47

Andre Toledo Gama

1626 bronze badges

1 Comment

A1rPun Over a year ago

You'll end up with the same issue

Zakariae BEN ALLAL · Accepted Answer · 2024-05-15 13:10:19Z

-1

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.

answered May 15, 2024 at 13:10

Zakariae BEN ALLAL

1025 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related