Hash navigation not working in Next.js

• mdx-bundler version: 3.4.1
• node version: 15.5
• npm version: 7.3.0

Relevant code or config

import { bundleMDX } from "mdx-bundler";
import {getMDXComponent} from 'mdx-bundler/client'
import {useMemo} from 'react'
import path from 'path'

if (process.platform === 'win32') {
  process.env.ESBUILD_BINARY_PATH = path.join(
    process.cwd(),
    'node_modules',
    'esbuild',
    'esbuild.exe',
  )
} else {
  process.env.ESBUILD_BINARY_PATH = path.join(
    process.cwd(),
    'node_modules',
    'esbuild',
    'bin',
    'esbuild',
  )
}

export const getStaticProps = async ({ params }) => {
  const mdxSource = `

${Array(1000).fill(0).map((_, index) => {
  return `<h2 id="${index}">${index}</h2>`
})}

`.trim();

  const result = await bundleMDX(mdxSource);

  const { code } = result;
  return {
    props: { code }, // will be passed to the page component as props
  };
};

export default function Post({ code }) {
  const Component = useMemo(
    () => getMDXComponent(code))
  return (
    <div>
      <Component />
    </div>
  );
}

Hash links don’t work in Next.js on refresh. If you navigate to them while on the page it will work but if you go to them directly you can get problems.

The screen goes down to the hash link but then goes up again.

Reproduction repository:

https://github.com/MatthewCaseres/mdx-bundler-experiments

Notes: This is an issue in next-mdx-remote as well, here’s an issue that is related but not identical from their repo. https://github.com/hashicorp/next-mdx-remote/issues/65

[MatthewCaseres]

Hmm, it happens consistently for me in local development but not when I deployed to https://mdx-bundler-experiments.vercel.app.

Thanks for your responsiveness and maintenance work, I’ll be migrating from next-mdx-remote now that is resolved.

[Arcath]

No problem!

Glad to hear that mdx-bundler does what you need!