RichText component throws NextRouter was not mounted

[ahiyalala]

Describe the Bug

After performing the JSS 21.x to 22.1 upgrade, we encountered an error that reads "NextRouter was not mounted" and after reading the logs it is coming from the RichText component in sitecore-jss-nextjs. I've read in the Next.JS documentation that this is happening only if we are using next/router on an app application; we are using pages.

However if this would help, we are also using turborepo for our jss solution.

To Reproduce

Perform JSS upgrade from 21.1.6 to 22.1.0 in succession as described in the documentation

Expected Behavior

useRouter from next/router should not have been an issue because the Next.js application is not running on app version of Next.js

Possible Fix

No response

Provide environment information

• Sitecore Version: XM Cloud
• JSS Version: 22.1.0
• Browser Name and version: Edge
• Operating System and version (desktop or mobile): Windows 11

[ahiyalala]

For added information, we used it in this manner on our components:

import { RichText as JssRichText } from '@sitecore-jss/sitecore-jss-nextjs';
import { RichTextProps } from '../RichText.types';

export const Default = (props: RichTextProps): JSX.Element => {
  const id = props.params.RenderingIdentifier;

  return (
    <div
      className={`component rich-text py-mobile md:py-desktop ${props.params.styles.trimEnd()}`}
      id={id ? id : undefined}
    >
      <div className="component-content">
           <JssRichText field={props.fields.Text} />
      </div>
    </div>
  );
};

[pzi]

We encountered the same error during our upgrade and found the same thing in our SSG/ISR application using page router. We initially wrapped our use of the RichText component in a NoSsr component to make it only render on the client, not the server. However, as we updated next and jss further, to later versions, we found we didn't need that any more and it was just working as expected.

What version of next are you using? We're on latest next v14 and latest jss v22.

[art-alexeyenko]

@ahiyalala thanks for reaching out! JSS currently doesn't support AppRouter (pages only), so we can't guarantee everything will work as expected under that configuration. However, if @pzi encountered the same error on pages - this might have another root cause. @pzi do you have a repro scenario from your repo? Any specific usage cases and such would be very useful.

I've also put the issue in our backlog.

[coreyasmith]

@ahiyalala @pzi are either of you using a custom Next.js server? I've seen this in a JSS 21.7.0 application using Pages Router with a custom Next.js server. I "fixed" it with patch-package by changing next/router import to next/compat/router:

• node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\components\RichText.js: change const router_1 = require("next/router"); to const router_1 = require("next/compat/router");
• node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\esm\components\RichText.js: change import { useRouter } from 'next/router'; to import { useRouter } from 'next/compat/router';

[EugeneVlk]

Any updates on the issue? As I faced the same error as it's described here: https://nextjs.org/docs/messages/next-router-not-mounted Don't really want to use patch-packages to overcome the issue.