Function component has error “Failed to compile Unexpected token”

I’m having an error with a function, this’s code:

import React, { useState } from "react";
import { CREATE_USER } from "../Graphql/Mutation";
import { useMutation } from "@apollo/client";

function CreateUser() {
    
  const [name, setName] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  const [createUser, { error }] = useMutation(CREATE_USER);

  return (
    <div className="createUser">
      <input
        type="text"
        placeholder="name"
        onChange={(event) => {
          setName(event.target.value);
        }}
      />
      <input
        type="text"
        placeholder="username"
        onChange={(event) => {
          setUserName(event.target.value);
        }}
      />
      <input
        type="text"
        placeholder="password"
        onChange={(event) => {
          setPassword(event.target.value);
        }}
      />
      <button
        onClick={() => {
          createUser({
            variables: {
              name: name,
              username: userName,
              password: password,
            },
          });
        }}
      >
        Create User
      </button>
    </div>
  );
}

export default CreateUser;

I’m having this error:

Failed to compile
Unexpected token, expected "," (14:9)

  12 |
  13 |   return (
> 14 |     <div className="createUser">
     |          ^
  15 |       <input
  16 |         type="text"
  17 |         placeholder="name"

the file name is create.ts, so do you know what I’m doing wrong??

I know the form to create a component function is like:

function nameFunction(){ return(

…..something more ) }

export default nameFunction;

I’m apply it, but don’t work

Answer

It seem’s just a naming issue. Files that use JSX with Typescript can’t have an .ts extension because plain TS can’t handle it. Renaming to create.tsx should solve the problem =)