Closed pomber closed 3 weeks ago
Seems like a regression in https://github.com/vercel/next.js/compare/v13.4.20-canary.31...v13.4.20-canary.32
I think this is related to https://github.com/vercel/next.js/pull/55362, we will have a look!
I run into that issue using custom components in the useMDXComponents hook.
import * as mdxComponents from '@/components/mdx'
import { type MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents) {
return {
...components,
...mdxComponents,
}
}
If I declare custom components inside the file it works.
This is happening in v13.5.5 for any client component in MDX for me too. Downgrading to 13.4 for now
I'm also facing the same issue. Downgrading to 13.4 fixed it
This may be fixed in the latest canary release of 13.5.7. So far so good!
I'm also using the experimental rust compiler in my next config
const nextConfig = {
experimental: {
mdxRs: true
}
}
Edit: things also seem to work well on the default compiler
Just tried v14.0.1
and looks like it is fixed.
Sadly still run into the same problem, even after the v14.0.1 next.js Update :-/
Only reverting to "next": "13.4.12", solves the issue.
I'm using this custom component instead of Image
in mdx files. Hacky, but works.
import Image, { ImageProps } from "next/image";
export function MdxImage(props: ImageProps) {
return <Image {...props} />;
}
I tried some versions with this issue in my case. (With App Router)
13.4.12 ~ 13.4.19: No error 13.5.1 ~ 13.5.6 : Error only dev mode 14.0.0 ~ 14.0.1 : No error 14.0.2 ~ : *Another error...
*) Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This bug still exists in 14.1
I can still reproduce it on the latest version of next.
Edit: actually, it happens to me, but only when consuming components from other parts of my monorepo 🤔
I'll try to isolate the issue later today
This may be fixed in the latest canary release of 13.5.7. So far so good!
I'm also using the experimental rust compiler in my next config
const nextConfig = { experimental: { mdxRs: true } }
Edit: things also seem to work well on the default compiler
Hey @ealexhaywood, I was using next js v14.1.4 with app router and configured MDX as per the documentation but was getting error while importing MDX file in a component - after adding mdxRs:true
it worked. Thanks for sharing
@pomber Hi, PR #57301 was landed at 13.5.7-canary.22
and is the exact fix of this issue. It should've worked on v14.
As there were a few changes in using MDX, opened a PR for the fix to your repro branch.
The main changes:
hello/page.mdx
instead of hello.mdx
just like the migration from Pages Router to App Router.pageExtensions
at the next config. It is also documented here.Please check out the MDX docs as it had several updates! Doc: https://nextjs.org/docs/app/building-your-application/configuring/mdx
@victorteokw @t6adev @GrowthWizard @MananTank @ealexhaywood Were you guys able to manage it to work?
@devjiwonchoi Update to latest version, The issue is fixed
Closing as https://github.com/vercel/next.js/pull/57301 fixed this issue. For future readers, please open a new issue with the latest repro. Thank you!
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Link to the code that reproduces this issue
https://github.com/pomber/nextjs-mdx-use-client-bug
To Reproduce
next dev
(it only happens in development mode)Current vs. Expected behavior
Fails with this error:
Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, MDX (@next/mdx)
Additional context
I'm having problems using any client component directly from mdx files:
If
./test.js
has"use client"
this fails in dev mode.A workaround is to re-export the
Test
component from a file without"use client"
.The same example works with
next@13.4.19
and fails withnext@13.5.1
.Similar to #52415 but now in v13.5 it happens for every client component.
NEXT-1666