Next 13 - Cannot get client side component to work

[languid wadi]

Hello.

https://github.com/Industrial/test-next-keystone/blob/main/app/admin/page.tsx

Here you can see a route on which I want to render a component only on the client side and not the server side. What I want to render is https://marmelab.com/react-admin/ which is client side only and cannot be server side rendered.

As you can see, if isClient is false then I just render a div. This should happen in SSR and once in the browser, after which the effect should run and it should render the <Application /> component. It does not.

Help!

[golden rapids]

that should work, are you sure it doesnt? you could disable JS in the browser for example to disable hydration and see what it looks like before useEffect runs

[cunning anvil]

I also think it SHOULD work. I can test it out later but that looks valid to me

[languid wadi]

@golden rapids the useEffect isn't even running 😦

@cunning anvil Please do 🙂

[languid wadi]

Anyone?

[cunning anvil]

@languid wadi
Can you rewrite that page.tsx to this and test

'use client';

import { useEffect, useState } from 'react';


export default function Page () {
    const [isClient, setIsClient] = useState<boolean>(false);

    useEffect(() => {
        console.log('effect');
        setIsClient(true);
    }, []);

    console.log('admin page', isClient);

    if (!isClient) {
        return <div>{`isClient: ${isClient}`}</div>;
    }

    return <div>{`isClient: ${isClient}`}</div>;
};

from my testing it looks like you cant just export unnamed anonymous functions

if my item is a page, i export a named default Page and that has never failed me.
When I put in your code, i got an error:

TypeError: Cannot read properties of undefined (reading 'id')
    at resolveModuleMetaData (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:198:56)
    at serializeModuleReference (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1329:50)
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1696:40)
    at Array.toJSON (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1112:40)
    ... (omitted for brevity)

So Im not sure where you got that syntax of exporting constant anonymous functions for these components, but I would advise sticking with the syntax Next13 uses for pages, layouts and components to prevent any issues since they import these components based on the export given

[languid wadi]

Yeah, I am using eslint rules that rewrite / error if it's not an anonymous function. To prevent naming things I don't have to. I'll change it around.

Thanks! I'll give it a shot

[cunning anvil]

I could be wrong about this but in my testing I think for Next13 its expecting certain exports to be named
such as RootLayout, Layout, Page, Loading, Error, Head, NotFound
Its part of their special file conventions https://beta.nextjs.org/docs/api-reference/file-conventions/page

regular React components i can understand being anonymous but I think for next13 components especially the ones that refer to specific parts of the page/layout should be named exports so it can be automatically properly imported by the compiler

[languid wadi]

I changed it to:

import Thing from './Thing'

export default function Page() {
  return <Thing />
}

And the Thing.tsx:

export default function Thing() {
  return <h1>THING</h1>
}

Weirdly, this is what i get in the console:

Uncaught Error: invariant expected app router to be mounted
    useRouter navigation.js:93
    HotReload hot-reloader-client.js:84
    renderWithHooks react-dom.development.js:18732
    mountIndeterminateComponent react-dom.development.js:22928

My setup might be wrong :S

Is there a create next app for next 13?

[cunning anvil]

There is a create next app for next13

npx create-next-app@latest --experimental-app Let me double check that command

npx create-next-app@latest --experimental-app
# or
yarn create next-app --experimental-app
# or
pnpm create next-app --experimental-app

pick your poison

FYI You can familiarize yourself with the docs/setup here: https://beta.nextjs.org/docs/installation

[languid wadi]

Yeah, it's clearly working there. I'll fix it. Thanks for your time 🙂

[cunning anvil]

nice nice, glad it worked
Migrate away, happy coding! let me know if you need any other help

[languid wadi]

Fixed it, it works now. Although the Keystone CMS GraphQL API route doesn't work yet and neither does the Keystone Admin, but that's a whole different issue because they haven't updated to Next 13 yet.

But at least the admin UI works