The '?' modifier can only be used in TypeScript files. Typescript error . "?" op-CodePudding

What's this error about ?? Next js.

  error - ./components/MiniProfile.js
Error: 
      x An object member cannot be declared optional
       ,----
     9 | { session? (
       :          ^
       `----
    
      x Unexpected token `(`. Expected ... , *,  (, [, :, , ?, = or an identifier
       ,----
     9 | { session? (
       :            ^
       `----
    
    Caused by:
        0: failed to process input file
        1: Syntax Error

MiniProfile.js

    import { signIn, signOut, useSession } from 'next-auth/react';

    function MiniProfile() {
    const { data: session } = useSession()


    return (
        { session?(
            <div>
                <div className="p-4 flex border mt-14 ml-10 items-center 
                justify-between">
                    <img src={session?.user?.image}
                        className="h-16 w-16 rounded-full border p-1 object-cover" />
                    <div className="flex-1 mx-4 ">
                        <h2 className="font-bold">pj</h2>
                        <h3 className="text-sm text-gray-500"> Welcome to Instagram</h3>
                    </div>

                    <button onClick={signOut}
                        className="text-blue-400 text-sm font-semibold">Sign out</button>
                </div>
            </div>
        ) : (<div> hii </div>)}

    )}
export default MiniProfile;

CodePudding user response：

You add {} after return is incorrect, it should have elements before using {}.

You also have another problem here session?. session? means an optional chaining condition which is unexpected in your case. If you want to have the ternary condition, you should add space like session ?.

A few examples:

return { session ? <div></div> : <div></div> } //wrong

return session ? <div></div> : <div></div> //correct

return <React.Fragment>{session ? <div></div> : <div></div>}</React.Fragment> //correct

Final formatted code

import { signIn, signOut, useSession } from "next-auth/react";

function MiniProfile() {
  const { data: session } = useSession();

  return session ? (
    <div>
      <div
        className="p-4 flex border mt-14 ml-10 items-center 
                justify-between"
      >
        <img
          src={session?.user?.image}
          className="h-16 w-16 rounded-full border p-1 object-cover"
        />
        <div className="flex-1 mx-4 ">
          <h2 className="font-bold">pj</h2>
          <h3 className="text-sm text-gray-500"> Welcome to Instagram</h3>
        </div>

        <button
          onClick={signOut}
          className="text-blue-400 text-sm font-semibold"
        >
          Sign out
        </button>
      </div>
    </div>
  ) : (
    <div> hii </div>
  );
}
export default MiniProfile;