How to use CodeHike with <MDXProvider/> (@mdx-js/react) in a Next.js page/layout

[MildTomato]

Hi everyone,

I'm using <MDXProvider/> from @mdx-js/react to consume the mdx source.
It seems like this is maybe a strange setup, but it means we get to have a bit more control over the layout of the page.

It seems like codehike doesn't like it though, so I was just wondering if CodeHike can be used with a set up like this?

The error looks like this - which is kind of to be expected as I guess it doesn't know what to do with the <CH.Code> and <CH.Section> components. Even if I fixed that, would it even work ?

Update.. I've now added the components in via my getComponents function.
But now i'm getting the following with the <CH.Code/>

// next.config.mjs

import nextMdx from '@next/mdx'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import { remarkCodeHike } from '@code-hike/mdx'
import theme from 'shiki/themes/github-dark.json' assert { type: 'json' }

const withMDX = nextMdx({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, [remarkCodeHike, { theme, lineNumbers: false }]],
    rehypePlugins: [rehypeSlug],
  },

  options: {
    // This is required for `MDXProvider` component
    providerImportSource: '@mdx-js/react',
  },
})

// /** @type {NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true,
  swcMinify: true,
}

// next.config.js
export default () => {
  const plugins = [withMDX]
  return plugins.reduce((acc, next) => next(acc), nextConfig)
}

// mdx file example

import GuideLayout from '~/layouts/guide'

export const meta = {
  author: 'Rich Haines',
  type: 'guide',
}

# Just testing out [Code Hike](https://codehike.org/)

Some normal `markdown`

## Annotation Example

\```js index.js box=1[25:39]
console.log('Some code. I am annotated!')
\```

## Focus Example

\```js next.config.js focus=1:2,7
const { remarkCodeHike } = require('@code-hike/mdx')
const theme = require('shiki/themes/monokai.json')

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [[remarkCodeHike, { theme }]],
    rehypePlugins: [],
  },
})

module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
})
\```

<CHSection>

## Code Links Example

We are looking at the [console.log](focus://console.js#2) function today

<CHCode>\```js console.js console.table(["Hello", "World"]) console.log("Hello World") \```</CH.Code>

</CHSection>

export default (context) => <GuideLayout meta={meta} {...context} />

// layout

import { MDXProvider } from '@mdx-js/react'
import getComponents, { MDXComponentsType } from '~/lib/getComponents'

const ContentsLayout = (props) => {
  return (
    <>
      <MDXProvider components={getComponents()}>
        <div className="prose mx-auto my-32">{props.children}</div>
      </MDXProvider>
    </>
  )
}

export default ContentsLayout

// components for MDXprovider

import NumberSection from '~/components/NumberSection'
import TestDiagram from '~/diagrams/testdiagram'
import { Section as CHSection, Code as CHCode } from '@code-hike/mdx/components'

export default function mdxComponents() {
  const components = {
    NumberSection: (props: any) => {
      return <NumberSection {...props} />
    },
    TestDiagram: (props: any) => {
      return <TestDiagram />
    },
   CHSection: (props: any) => {
      return <CHSection {...props} />
    },
    CHCode: (props: any) => {
      return <CHCode {...props} />
    },
  }

  return components
}

[pomber]

Try this https://codehike.org/docs/configuration#auto-import

(From my phone, didn't read the entire issue 😁)

[pomber]

can you make it smaller? start removing things until it starts working or you can't remove anything else, so it's easier to debug

[MildTomato]

sure, cleaned it up 😄

[MildTomato]

If I remove the CH component from the components injected into MDXProvider it works 😂
CH.Section seems to render fine though, so if you remove CH.Code the markdown will then render

[pomber]

I think the problem is in your next.config.mjs, you are defining options two times. After you fix that, I think you can remove the autoImport: false, for your case it should work without manually importing CH.

[MildTomato]

🙈 I'm so sorry - it's exactly that!

how did i not see that?!