Expected object `CH` to be defined

[marcelgruber]

I have a case where I am doing this:

import { CH } from '@code-hike/mdx/components'

...

<MDXRemote {...content} components={{ CH }} />

However, I want to pass in multiple sets of components.

  const components = {
    h1: H1,
    h2: H2,
    h3: H3,
    h4: H4,
    h5: H5,
    h6: H6,
  }

...

<MDXRemote {...content} components={{ CH + components }} />

However, any time I deviate from the components={{ CH }} syntax, I get the error:

Expected object CH to be defined

I also tried this:

  const components = {
    CH,
    h1: H1,
    h2: H2,
    h3: H3,
    h4: H4,
    h5: H5,
    h6: H6,
  }

...

<MDXRemote {...content} components={{ components }} />

But get the error:

Expected object CH to be defined: you likely forgot to import, pass, or provide it.

Another way to phrase the question would be how to pass in multiple sets of components on this line:

https://github.com/code-hike/codehike/blob/4b940f2f6c8d8d0df443f453bdbf07ca332dba9a/examples/next-mdx-remote/pages/index.js#L23

[pomber]

I think it should be:

  const components = {
    CH,
    h1: H1,
    h2: H2,
    h3: H3,
    h4: H4,
    h5: H5,
    h6: H6,
  }

...

<MDXRemote {...content} components={ components } />

Instead of components={{components}}

[marcelgruber]

I made some progress thanks to this page:

https://mdxjs.com/docs/using-mdx/#components

By using a function, the errors go away, however my custom components don't seem to be getting rendered:

<MDXRemote {...content} components={() => ({ CH, customHeadingComponents })} />

At this point, the issue may be out of scope of Code Hike.

[pomber]

But have you tried this?

  const components = {
    CH,
    h1: H1,
    h2: H2,
    h3: H3,
    h4: H4,
    h5: H5,
    h6: H6,
  }

...

<MDXRemote {...content} components={ components } />

[marcelgruber]

That worked! Custom components are working now as well. Thank you.

Would it make sense to update this file with our learnings? We could also update the README?