Getting a "Maximum call stack size exceeded" error on Nextra and Nextra-Theme-Docs v2-beta.41

[jerembdn]

This error happens only when a .mdx file has a nextra-theme-docs import, it works perfectly without.

Here is the error i'm getting:

RangeError: Maximum call stack size exceeded
    at getStackByComponentStackNode (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5303:64)
    at getCurrentStackInDEV (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5456:12)
    at renderNodeDestructive (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6080:129)
    at renderNode (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/home/jerem/development/onruntime/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)

Node v16
Next.JS v12
next.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */
const nextra = require("nextra");

/**
 * @type {import("nextra").NextraConfig}
 */
const config = {
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.js",
  unstable_flexsearch: true,
  unstable_staticImage: true,
};

const withNextra = nextra(config);

module.exports = withNextra({
  compiler: {
    styledComponents: true,
  },
});

[dimaMachina]

Hi! Could you provide a reproduction repo ?

[dimaMachina]

I saw emoji of shit in your commit and didn't want to take a look 😂

[jerembdn]

Oh sorry, this is a misunderstanding, we use a standard for our commits (gitmoji), the shit emoji means I wrote bad code that needs to be improved 😅
Which emoji have it's signification for every commit, and it was a good situation to write this commit name like this

[jerembdn]

any news ?

[dimaMachina]

Hey, sorry, currently have some problems with charging my Mac, need to repair it, will take a look once back to work 🤞

[jerembdn]

Oh ok haha i currently facing the same issue with my mac 🥲, no problem take your time !

[dimaMachina]

First, there is no longer Component.getLayout and you don't need to import nextra-theme-docs/style.css, your app.tsx should contain instead:

import { AppProps } from 'next/app'
import '../styles/global.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Second, you have incorrect import in index.mdx that produce Maximum call stack size exceeded error

-import Bleed from 'nextra-theme-docs'
+import { Bleed } from 'nextra-theme-docs'

also, you don't need to declare types in theme.ts just import DocsThemeConfig from nextra-theme-docs

[jerembdn]

You are a boss, thanks 🥳