NextXP: Content Studio throws error in EDIT-Mode, when using Router-Hook(NextJS)

Bugs
1

Enonic version: latest
OS: MAC and WINDOWS

I use useRouter() to get query-params on some components. In EDIT Mode I get the following Error

Bildschirmfoto 2023-05-03 um 07.48.01
Bildschirmfoto 2023-05-03 um 07.48.011720×386 37.7 KB

In older versions (0.9 ) I had the following workaround:

const router = useRouter();
    if (!router) {
        return <h1>Template Editing Mode ?</h1>
    }
2

Hi @luctho !

This is the Next.js own hook, so the only thing that changed since 0.9 here is the Next.js version.

Googling it shows that there is an open issue about that and a suggestion how to work around it.

Also the documentation states that useRouter is a client-side hook only so make sure you don’t use it during server-side rendering.

3

Hi @pmi !

Thanks for research and sharing :slight_smile:

I do not use the hook on SSR.
In renderModes inline and preview the component works without issues.

So what is different in EDIT-Mode ?

The workaround from your link does not work here !

4

Hi @luctho !

So this ONLY happens in EDIT mode ? Then there is good news and bad news :wink:

Bad news is that edit mode is different from the others in the way that we don’t do hydration there to disable client-side interactivity. This is needed to make sure CS page editor does not interfere with client code and probably is the reason why your router is not initialized.

Good news is that you can still have some components hydrated !
This is done with react component <StaticContent>. Everything inside it is not hydrated, while everything outside is.

You can find it in the _app.tsx file:

    return (
        **<StaticContent condition={isEdit}>**
            <Header
                title="🔥 Next.XP"
                logoUrl={getUrl('images/xp-shield.svg', pageProps.meta)}
                meta={pageProps.meta}
            />
            <main style={{
                margin: `0 auto`,
                maxWidth: 960,
                padding: `0 1rem`,
            }}>
                <Component {...pageProps} />
            </main>
            <Footer/>
        **</StaticContent>**
    );

So my guess is that you will be able to use all your client hooks outside of that tag !

NB: I do not recommend removing it completely though because client code may interfere with page editor and result in an uncontrolled behavior.

5

I can confirm, that the cause for this error is <StaticContent/>. When I remove it and keep the following code- EDIT mode works!

Where should I place the wrapper then ? My client hooks are inside <Component> ?
… and which use cases did you have that interfere ?

6

Content studio augments the page in page editor so the page needs to stay static.
Any kind of problems on UI as well as data corruption on save may happen if page changes its html.

As long as you don’t change page html, something like this should do the trick:

    return (
    <>
        <YourCustomClientHooksComponent>
        <StaticContent condition={isEdit}>
            <Header
                title="🔥 Next.XP"
                logoUrl={getUrl('images/xp-shield.svg', pageProps.meta)}
                meta={pageProps.meta}
            />
            <main style={{
                margin: `0 auto`,
                maxWidth: 960,
                padding: `0 1rem`,
            }}>
                <Component {...pageProps} />
            </main>
            <Footer/>
        </StaticContent>
    </>
    );
7

@pmi Thanks for your suggestion.

I think that would become unnecessary complex as MyCustomClientHooksComponent is a fully integrated PartComponent .

I decided to render a dummy-component with limited functionality - as I need no Routing in EDIT Mode. And thanks to React modularity this is not really much effort :slight_smile:

Thomas