I m having this TypeScript problem when setting up the auth SuperTokens.com #support-questions-legacy

I'm having this TypeScript problem when setting up...

goodgravy

03/03/2023, 10:57 AM

I'm having this TypeScript problem when setting up the auth UI in a Next.js app:

Copy code

users:build: info  - Linting and checking validity of types...
users:build: Failed to compile.
users:build: 
users:build: ./pages/auth/[[...path]].tsx:21:6
users:build: Type error: 'SuperTokensComponentNoSSR' cannot be used as a JSX component.
users:build:   Its element type 'ReactElement<any, any> | Component<unknown, any, any>' is not a valid JSX element.
users:build:     Type 'Component<unknown, any, any>' is not assignable to type 'Element | ElementClass'.
users:build:       Type 'Component<unknown, any, any>' is not assignable to type 'ElementClass'.
users:build:         The types returned by 'render()' are incompatible between these types.
users:build:           Type 'React.ReactNode' is not assignable to type 'import("/Users/james/Code/oughtinc/elicit-mono/apps/users/node_modules/@types/react/index").ReactNode'.
users:build:             Type '{}' is not assignable to type 'ReactNode'.
users:build: 
users:build:   19 | 
users:build:   20 |   return (
users:build: > 21 |     <SuperTokensComponentNoSSR />
users:build:      |      ^
users:build:   22 |   )
users:build:   23 | }

This is when using the Auth component directly from https://supertokens.com/docs/thirdpartypasswordless/nextjs/setting-up-frontend

rp_st

03/03/2023, 10:59 AM

hey. @alisheraituarov can help here.

goodgravy

03/03/2023, 11:13 AM

FWIW I worked around this with:

Copy code

export default function Auth() {
  const [routingComponent, setRoutingComponent] = useState<JSX.Element | null>(null);

  useEffect(() => {
    setRoutingComponent(SuperTokens.getRoutingComponent());
  }, []);

  return routingComponent;
}

alisheraituarov

03/03/2023, 11:17 AM

Hey! Are you sure you did not change anything from https://supertokens.com/docs/thirdpartypasswordless/nextjs/setting-up-frontend ?

goodgravy

03/03/2023, 11:17 AM

Oops, now a different error, but very similar stacktrace:

Copy code

web:build: Failed to compile.
web:build: 
web:build: ./src/pages/_app.tsx:46:8
web:build: Type error: 'Component' cannot be used as a JSX component.
web:build:   Its element type 'ReactElement<any, any> | Component<any, any, any> | null' is not a valid JSX element.
web:build:     Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
web:build:       Type 'Component<any, any, any>' is not assignable to type 'ElementClass'.
web:build:         The types returned by 'render()' are incompatible between these types.
web:build:           Type 'React.ReactNode' is not assignable to type 'import("/Users/james/Code/oughtinc/elicit-mono/apps/web/node_modules/@types/react/index").ReactNode'.
web:build:             Type '{}' is not assignable to type 'ReactNode'.
web:build: 
web:build:   44 |     <SuperTokensWrapper>
web:build:   45 |       <NavBar />
web:build: > 46 |       <Component {...pageProps} />
web:build:      |        ^
web:build:   47 |     </SuperTokensWrapper>
web:build:   48 |   );
web:build:   49 | }
web:build: error Command failed with exit code 1.

goodgravy

03/03/2023, 11:18 AM

Yep, I just copied the code directly from the page to check

goodgravy

03/03/2023, 11:19 AM

(The second error came from code inspired by https://supertokens.com/docs/thirdpartypasswordless/nextjs/init#nextjsinitlastnumber-call-the-frontend---preinit-functions-and-wrap-with---presupertokenswrapper-component--pre)

alisheraituarov

03/03/2023, 11:20 AM

have you tried deleting .next .next/cache ?

goodgravy

03/03/2023, 11:22 AM

Just did; same error (the one about

<Component {...pageProps} />

)

goodgravy

03/03/2023, 11:22 AM

I should note that the app is part of a Turbo monorepo, in case that's relevant

alisheraituarov

03/03/2023, 11:23 AM

have you tried deleting it and rebuilding it with https://discord.com/channels/603466164219281420/1081168584501379112/1081173444357525524 ?

goodgravy

03/03/2023, 11:24 AM

You mean revert my code back to match that in the example, then delete all the `.next`s, then rebuild?

alisheraituarov

03/03/2023, 11:24 AM

yup

goodgravy

03/03/2023, 11:27 AM

I get the same error(s)

goodgravy

03/03/2023, 11:29 AM

brb

alisheraituarov

03/03/2023, 11:31 AM

any chance you can run build from within nextjs app directory if you are not doing that already ?

goodgravy

03/03/2023, 11:42 AM

Sure thing, one sec

goodgravy

03/03/2023, 11:44 AM

I get the same error when running

yarn run build

directly within the app directory:

Copy code

> yarn run build
yarn run v1.22.17
$ next build
info  - Loaded env from /Users/james/Code/oughtinc/elicit-mono/apps/users/.env
info  - Linting and checking validity of types .Failed to compile.

./pages/auth/[[...path]].tsx:21:6
Type error: 'SuperTokensComponentNoSSR' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<unknown, any, any>' is not a valid JSX element.
    Type 'Component<unknown, any, any>' is not assignable to type 'Element | ElementClass'.
      Type 'Component<unknown, any, any>' is not assignable to type 'ElementClass'.
        The types returned by 'render()' are incompatible between these types.
          Type 'React.ReactNode' is not assignable to type 'import("/Users/james/Code/oughtinc/elicit-mono/apps/users/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.

  19 | 
  20 |   return (
> 21 |     <SuperTokensComponentNoSSR />
     |      ^
  22 |   )
  23 | }
  24 | 
error Command failed with exit code 1.

alisheraituarov

03/03/2023, 11:49 AM

which version of node are you using ?

goodgravy

03/03/2023, 11:54 AM

v16.15.1

goodgravy

03/03/2023, 11:55 AM

I'm going to try a fresh

npx create-supertokens-app@latest

to hopefully bisect general environment problems vs. problems in the monorepo

alisheraituarov

03/03/2023, 11:56 AM

okay, please keep me updated

goodgravy

03/03/2023, 11:57 AM

This is from a brand new supertokens app, created with the above command:

Copy code

> yarn run build
yarn run v1.22.17
$ next build
info  - Loaded env from /Users/james/Code/oughtinc/supertokens-test/.env
info  - Linting and checking validity of types ...Failed to compile.

./pages/auth/[[...path]].tsx:7:43
Type error: Argument of type 'Promise<unknown>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
  Type 'Promise<unknown>' is not assignable to type 'LoaderComponent<{}>'.
    Type 'unknown' is not assignable to type 'ComponentType<{}> | ComponentModule<{}>'.

   5 | import SuperTokens from "supertokens-auth-react";
   6 | 
>  7 | const SuperTokensComponentNoSSR = dynamic(new Promise((res) => res(SuperTokens.getRoutingComponent)), { ssr: false });
     |                                           ^
   8 | 
   9 | export default function Auth(): JSX.Element {
  10 |     useEffect(() => {
error Command failed with exit code 1.

goodgravy

03/03/2023, 11:57 AM

Here's the config I supplied:

Copy code

? What is your app called? supertokens-test
? Choose a frontend framework (Visit our documentation for integration with other frameworks): Next.js
? What type of authentication do you want to use? Social Login + Passwordless

rp_st

03/03/2023, 11:58 AM

hey @goodgravy can you please open an issue about this on our github? This seems like a docs / inetgration issue which we should fix.

rp_st

03/03/2023, 11:59 AM

Also, which TS version are you using?

rp_st

03/03/2023, 12:02 PM

Can you try this:

Copy code

tsx
const SuperTokensComponentNoSSR = dynamic<React.ComponentProps<typeof SuperTokens.getRoutingComponent>>(
    new Promise((res) => res(SuperTokens.getRoutingComponent)),
    { ssr: false }
)

goodgravy

03/03/2023, 12:04 PM

4.9.5

rp_st

03/03/2023, 12:06 PM

Using this doesn't work for you either?

Copy code

const SuperTokensComponentNoSSR = dynamic<React.ComponentProps<typeof SuperTokens.getRoutingComponent>>(
    new Promise((res) => res(SuperTokens.getRoutingComponent)),
    { ssr: false }
)

goodgravy

03/03/2023, 12:07 PM

This worked in the newly-created app!

rp_st

03/03/2023, 12:07 PM

ok cool! We have just updated the CLI to use this new code. Thanks for pointing this out

goodgravy

03/03/2023, 12:11 PM

Unfortunately, the same snippet that works in the new app causes the

Type error: 'SuperTokensComponentNoSSR' cannot be used as a JSX component.

I was originally whinging about in my monorepo

rp_st

03/03/2023, 12:17 PM

right.. that's odd. Okay, i think it would be best if you open a github issue about this and we can have a look soon

goodgravy

03/03/2023, 12:49 PM

OK, I'll create a new Turbo repo to see if I can recreate with something as small as possible

goodgravy

03/09/2023, 1:50 PM

Just following up here: - I didn't have the

Type error: 'SuperTokensComponentNoSSR' cannot be used as a JSX component

error when I created a new turborepo project, using SuperTokens - I upgraded the Node and Yarn versions in the actual app I was having problems with, and no longer see these errors there too 🙌 I'm not sure if it's the Node version of the Yarn version that made the difference – but I suspect the latter. I was using classic Yarn before.

147 Views

Previous Next