https://supertokens.com/ logo
Title
g

goodgravy

03/03/2023, 10:57 AM
I'm having this TypeScript problem when setting up the auth UI in a Next.js app:
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
r

rp

03/03/2023, 10:59 AM
hey. @Alisher Aituarov can help here.
g

goodgravy

03/03/2023, 11:13 AM
FWIW I worked around this with:
export default function Auth() {
  const [routingComponent, setRoutingComponent] = useState<JSX.Element | null>(null);

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

  return routingComponent;
}
a

Alisher Aituarov

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

goodgravy

03/03/2023, 11:17 AM
Oops, now a different error, but very similar stacktrace:
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.
Yep, I just copied the code directly from the page to check
a

Alisher Aituarov

03/03/2023, 11:20 AM
have you tried deleting .next .next/cache ?
g

goodgravy

03/03/2023, 11:22 AM
Just did; same error (the one about
<Component {...pageProps} />
)
I should note that the app is part of a Turbo monorepo, in case that's relevant
a

Alisher Aituarov

03/03/2023, 11:23 AM
g

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

Alisher Aituarov

03/03/2023, 11:24 AM
yup
g

goodgravy

03/03/2023, 11:27 AM
I get the same error(s)
brb
a

Alisher Aituarov

03/03/2023, 11:31 AM
any chance you can run build from within nextjs app directory if you are not doing that already ?
g

goodgravy

03/03/2023, 11:42 AM
Sure thing, one sec
I get the same error when running
yarn run build
directly within the app directory:
> 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.
a

Alisher Aituarov

03/03/2023, 11:49 AM
which version of node are you using ?
g

goodgravy

03/03/2023, 11:54 AM
v16.15.1
I'm going to try a fresh
npx create-supertokens-app@latest
to hopefully bisect general environment problems vs. problems in the monorepo
a

Alisher Aituarov

03/03/2023, 11:56 AM
okay, please keep me updated
g

goodgravy

03/03/2023, 11:57 AM
This is from a brand new supertokens app, created with the above command:
> 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.
Here's the config I supplied:
? 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
r

rp

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.
Also, which TS version are you using?
Can you try this:
tsx
const SuperTokensComponentNoSSR = dynamic<React.ComponentProps<typeof SuperTokens.getRoutingComponent>>(
    new Promise((res) => res(SuperTokens.getRoutingComponent)),
    { ssr: false }
)
g

goodgravy

03/03/2023, 12:04 PM
4.9.5
r

rp

03/03/2023, 12:06 PM
Using this doesn't work for you either?
const SuperTokensComponentNoSSR = dynamic<React.ComponentProps<typeof SuperTokens.getRoutingComponent>>(
    new Promise((res) => res(SuperTokens.getRoutingComponent)),
    { ssr: false }
)
g

goodgravy

03/03/2023, 12:07 PM
This worked in the newly-created app!
r

rp

03/03/2023, 12:07 PM
ok cool! We have just updated the CLI to use this new code. Thanks for pointing this out
g

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
r

rp

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
g

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
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.