The '?' modifier can only be used in TypeScript files. Typescript error . "?" operator error

Question

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;

Seems like a syntax error, trying to parse ({ session... as an object literal. Try something like this instead: return session ? (<div>...</div>) : (<div>...</div>) — Phillip
– Phillip, Commented Sep 20, 2022 at 11:12

Nick Vu · Accepted Answer · 2022-09-20 11:15:51Z

3

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;

answered Sep 20, 2022 at 11:15

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

1 Comment

user19485562 Over a year ago

yes.. ( return session ? <div></div> : <div></div> //correct ) this helped me. thank you

Collectives™ on Stack Overflow

The '?' modifier can only be used in TypeScript files. Typescript error . "?" operator error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related