Components failed to get imported in build time Nextjs v13 (Expected component `...` to be defined: you likely forgot to import, pass, or provide it.) #2436

plastic-shurikens · 2024-02-05T12:43:12Z

plastic-shurikens
Feb 5, 2024

I'm using Mdx in my Nextjs v13 project, everything is working fine in development, but when I try to build it, it throws an error as if the components are not defined (Expected component '...' to be defined: you likely forgot to import, pass, or provide it.)

_app.jsx

import * as mdxComponents from '@/components/mdx'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
       ...
      </Head>
      <StrictMode>
        <MDXProvider components={mdxComponents}>
          <Layout {...pageProps}>
            <Component {...pageProps} />
          </Layout>
        </MDXProvider>
      </StrictMode>
    </>
  )
}

Some components from mdx.jsx file

export { Button } from '@/components/Button'
export { CodeGroup, Code as code, Pre as pre } from '@/components/Code'

export const h2 = function H2(props) {
  return <Heading level={2} {...props} />
}

export function Col({ children, sticky = false }) {
  return (
    <div
      className={clsx(
        '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
        sticky && 'xl:sticky xl:top-24'
      )}
    >
      {children}
    </div>
  )
}

export function Properties({ children }) {
  return (
    <div className="my-6">
      <ul
        role="list"
        className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5"
      >
        {children}
      </ul>
    </div>
  )
}

Components are passed to MdxProvider component

Nextjs config

import nextMDX from '@next/mdx'
import { remarkPlugins } from './mdx/remark.mjs'
import { rehypePlugins } from './mdx/rehype.mjs'
import { recmaPlugins } from './mdx/recma.mjs'

const withMDX = nextMDX({
  options: {
    remarkPlugins,
    rehypePlugins,
    recmaPlugins,
  },
})

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
}

export default withMDX(nextConfig)

Answered by remcohaszing

Feb 5, 2024

This looks like a problem with your MDX content. You either forgot to provide a component, or possibly you made a typo using it. We can’t provide any help without the MDX content.

As a side not, in Next.js I recommend using an mdx-components.jsx file instead of @mdx-js/react. But before you do, you should probably solve your original problem first.

View full answer

remcohaszing · 2024-02-05T13:11:21Z

remcohaszing
Feb 5, 2024
Maintainer

This looks like a problem with your MDX content. You either forgot to provide a component, or possibly you made a typo using it. We can’t provide any help without the MDX content.

As a side not, in Next.js I recommend using an mdx-components.jsx file instead of @mdx-js/react. But before you do, you should probably solve your original problem first.

6 replies

ChristianMurphy Feb 5, 2024
Maintainer

Clarifying a bit @plastic-shurikens these two statements seem to contradict each other:

everything is working fine in development, but when I try to build it

and

it was working fine that way but then I believe the last few days i started getting this build error.

was the production build of NextJS never working, or was it working until recently?
If it started breaking recently, what did you change between when it last worked and when you noticed it breaking?

MDXProvider

MDXProvider is an option, but not one that's necessarily recommended, there are simpler and more performant alternatives https://mdxjs.com/docs/using-mdx/#mdx-provider
An example in next would be the magic mdx-component file that Remco mentions above https://nextjs.org/docs/pages/building-your-application/configuring/mdx#custom-elements

plastic-shurikens Feb 5, 2024
Author

It was recently breaking, sorry i didn’t mention that in the description, I don’t believe the problem is in my code because I used older commits and I got the same build error, I will just upgrade to next 14 and use the solution suggested by remco, thank you anyway.

ChristianMurphy Feb 5, 2024
Maintainer

It was recently breaking [...] don’t believe the problem is in my code because I used older commits and I got the same build error

@plastic-shurikens I cannot magically peer into your mind or computer.
For anyone to triage, we need to be able to replicate the issue.

Something changed in the code or dependencies. You, someone you work with, or a tool you use made that change. Ideally it would be good to know what that was as well.

I will just upgrade to next 14 and use the solution suggested by remco

I'd recommend that as a path forward 🚀 🙂

plastic-shurikens Feb 5, 2024
Author

I was honestly looking for a solution that would work with next 13 & @mdx-js/react, but that's okay sorry for any misunderstanding.

ChristianMurphy Feb 5, 2024
Maintainer

I was honestly looking for a solution that would work with next 13

https://nextjs.org/docs/pages/building-your-application/configuring/mdx#custom-elements was added in Next version 13.5.5 and has been available since.

I was honestly looking for a solution that would work with [...] @mdx-js/react

By this you mean using MDXProvider? Again it isn't recommended.
It may be possible, we'd need two things:

Some context on why MDXProvider is needed for your specific use case
A minimal reproducible example https://stackoverflow.com/help/minimal-reproducible-example so we can understand the dependencies you are working with and how you fit the pieces together. Ideally in a sandbox like https://next.new

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mdx-js

Components failed to get imported in build time Nextjs v13 (Expected component `...` to be defined: you likely forgot to import, pass, or provide it.) #2436

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

mdx-js

Components failed to get imported in build time Nextjs v13 (Expected component ... to be defined: you likely forgot to import, pass, or provide it.) #2436

plastic-shurikens Feb 5, 2024

Replies: 1 comment · 6 replies

remcohaszing Feb 5, 2024 Maintainer

ChristianMurphy Feb 5, 2024 Maintainer

plastic-shurikens Feb 5, 2024 Author

ChristianMurphy Feb 5, 2024 Maintainer

plastic-shurikens Feb 5, 2024 Author

ChristianMurphy Feb 5, 2024 Maintainer

Components failed to get imported in build time Nextjs v13 (Expected component `...` to be defined: you likely forgot to import, pass, or provide it.) #2436

plastic-shurikens
Feb 5, 2024

Replies: 1 comment 6 replies

remcohaszing
Feb 5, 2024
Maintainer

ChristianMurphy Feb 5, 2024
Maintainer

plastic-shurikens Feb 5, 2024
Author

ChristianMurphy Feb 5, 2024
Maintainer

plastic-shurikens Feb 5, 2024
Author

ChristianMurphy Feb 5, 2024
Maintainer