As of [15.2.0-canary.57] throws TypeError: Cannot read properties of undefined (reading 'stack')

[talatkuyuk]

Link to the code that reproduces this issue

https://github.com/talatkuyuk/next15-canary-bug-reproduction

To Reproduce

The app which I provided its link is a bug reproduction for [email protected] and still continues in [email protected] which is latest canary.

It throws the error below in only development mode, not in production.

The error occurs in the nextjs page (MDX article) related with importing a .mjs react component into MDX. I put another article page to show importing a module/function in MDX works well without problem.

TypeError: Cannot read properties of undefined (reading 'stack')
    at stringify (<anonymous>)
    at stringify (<anonymous>) {
  digest: '3183793578'
}

Actually, there is no problem with the Next.js versions below (All, I tested). Importing a .mjs react component into MDX works well.

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Step to produce the error

npm run dev--> open browser and click to articles, and see the error in development mode.

npm run build and npm run start --> open browser and click the articles, see there is NO error in production mode.

Then, install the previous canary version to test it.

npm i -S [email protected]
rm -rf .next && npm run dev

and see there is NO error in development and production modes.

Then, install the canary.57 again,

npm i -S [email protected]
rm -rf .next && npm run dev

and see the TypeError in development mode.

What is next-mdx-remote-client

The next-mdx-remote-client is a fork of next-mdx-remote, having more features like supporting import statements in MDX.

It works well with all versions of Next.js (13, 14, 15) for one year almost.

Log in the console related with the error

I put it in the end because it is long:

[Error] TypeError: Cannot read properties of undefined (reading 'stack')
resolveErrorDev
processFullStringRow
processFullBinaryRow
progress

The above error occurred in the <Unknown> component. It was handled by the <DevOverlayErrorBoundary> error boundary.
	onCaughtError (error-boundary-callbacks.js:53)
	logCaughtError (react-dom-client.development.js:8138)
	runWithFiberInDEV (react-dom-client.development.js:1474)
	(anonim işlev) (react-dom-client.development.js:8185)
	callCallback (react-dom-client.development.js:4841)
	commitCallbacks (react-dom-client.development.js:4861)
	runWithFiberInDEV (react-dom-client.development.js:1474)
	commitClassCallbacks (react-dom-client.development.js:11062)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12182)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12110)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12105)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12291)
	recursivelyTraverseLayoutEffects (react-dom-client.development.js:13296)
	commitLayoutEffectOnFiber (react-dom-client.development.js:12187)
	flushLayoutEffects (react-dom-client.development.js:17269)
	commitRoot (react-dom-client.development.js:17106)
	commitRootWhenReady (react-dom-client.development.js:16183)
	performWorkOnRoot (react-dom-client.development.js:16087)
	performWorkOnRootViaSchedulerTask (react-dom-client.development.js:17995)
	performWorkUntilDeadline (scheduler.development.js:36)

Current vs. Expected behavior

Expecting no error, and show the article page without problem.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:22:00 PST 2025; root:xnu-11215.81.4~3/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 18.20.5
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 10.4.1
Relevant Packages:
  next: 15.2.0-canary.57 // There is a newer canary version (15.2.0-canary.70) available, please upgrade! 
  eslint-config-next: 15.1.7
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

It throws the error in only development mode in local, not in production.

[eps1lon]

Thanks for the repro.

Can you move Bar.js around so that it uses JSX and not React.createElement. This is essentially a limitation of MDX where it can't allow import of react. You have to use JSX directly.

[talatkuyuk]

Hi, @eps1lon.

In next-mdx-remote-client, a MDX content is compiled via compile of @mdx-js/mdx. And, the compiled source is evaluated and hydrated with Reflect.construct. The @mdx-js/mdx does the same thing but with new Function. Even next-mdx-remote does the same via Reflect.construct, but it doesn't support import declarations in MDX yet.

Both new Function and Reflect.construct execute JavaScript code (compiled MDX source) in isolation from Next.js's Webpack or other bundlers. Therefore, it does not trigger Webpack’s built-in handling of static assets and other than .js files (like .png and .jsx files).

Don't think the mechanism is the same with next/mdx which uses custom MDX bundler in the Next.js.

So, whenever we want to import a module / component into MDX content via import declarations, it should be a plain javascript, not .jsx, in next-mdx-remote-client.

Actually, importing a component/module with plain javascript in MDX would work well with all Nextjs versions 13, 14, 15 till 15.2.0-canary.57. The problem arises in only development environment not in production.

I couldn't figure out what caused in Next.js the error from the log in the console. Something happened in the version 15.2.0-canary.57.

[eps1lon]

I couldn't figure out what caused in Next.js the error from the log in the console. Something happened in the version 15.2.0-canary.57.

It's a new feature in React that surfaces these issues where different versions of React are used such is the case with next-mdx-remote-client. Best to file a bug report against that package since you can't dynamically eval code with (dynamic) import statements since those won't be subject to bundling the right package.