How to use codeHike with esm import in next.js

[DefectingCat]

The next.js config is cjs file. But some remark plugins only provide esm packages, so i change my next.config.js to next.config.mjs and use it like:

import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';

const composedConfig = composePlugins([
  mdx({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [
        remarkFrontmatter,
        // [remarkToc, { maxDepth: 2 }],
        remarkGfm,
      ],
      rehypePlugins: [rehypePrism, rehypeSlug],
      providerImportSource: '@mdx-js/react',
    },
  }),
  /** @type {import('next').NextConfig} */
  {
    reactStrictMode: true,
    // experimental: {
    //    reactMode: 'concurrent',
    // },
    experimental: {
      outputStandalone: true,
    },
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  },
]);

I need use codeHike with remark plugins together, i tried:

import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import codeHike from '@code-hike/mdx';
const { remarkCodeHike } = codeHike;

const composedConfig = composePlugins([
  mdx({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [
        remarkFrontmatter,
        // [remarkToc, { maxDepth: 2 }],
        [remarkCodeHike],
        remarkGfm,
      ],
      rehypePlugins: [rehypePrism, rehypeSlug],
      providerImportSource: '@mdx-js/react',
    },
  }),
  /** @type {import('next').NextConfig} */
  {
    reactStrictMode: true,
    // experimental: {
    //    reactMode: 'concurrent',
    // },
    experimental: {
      outputStandalone: true,
    },
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  },
]);

Well, import is OK, but i got erros:

error - Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
C:\Users\someone\Git\someproject\node_modules\@code-hike\mdx\dist\index.esm.js:1
import { FontStyle, setCDN, getHighlighter } from 'shiki';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I need a little help

[pomber]

Hmm, nextjs isn't loading codehike as an es module. I'm going to rename codehike index.esm.js to .mjs and publish a new version.

[pomber]

You can try this version for now:

npm install @code-hike/mdx@0.4.0-next.3

[DefectingCat]

You can try this version for now:

npm install @code-hike/mdx@0.4.0-next.3

I tried with @code-hike/mdx@0.4.0-next.3, now next.js loading codehike as an es module, i can start a dev server with yarn dev. thank you.

But i got some new errors when i visit my mdx page:

error - SyntaxError: Named export 'SandpackClient' not found. The requested module '@codesandbox/sandpack-client' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@codesandbox/sandpack-client';
const { SandpackClient } = pkg;

Here is call stack:

Call Stack
<unknown>
file:///E:/Git/DefectingCat.github.io/node_modules/@code-hike/mdx/dist/components.esm.mjs (4)
ModuleJob._instantiate
node:internal/modules/esm/module_job (127:21)
async ModuleJob.run
node:internal/modules/esm/module_job (193:5)
async ESMLoader.import
node:internal/modules/esm/loader (337:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (437:15)

Seems when i use .mjs file, the sandpcak-client is a CommonJS module. it's cannot work with import { SandpackClient } from '@codesandbox/sandpack-client';

My mdx file just have basic markdown syntax. and i am not use another highlight plugin.

Here is my next.config.mjs file:

import remarkFrontmatter from 'remark-frontmatter';
import mdx from '@next/mdx';
// import rehypePrism from '@mapbox/rehype-prism';
import composePlugins from 'next-compose-plugins';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import { remarkCodeHike } from '@code-hike/mdx';

const composedConfig = composePlugins([
  mdx({
    extension: /\.mdx?$/,
    options: {
      remarkPlugins: [remarkFrontmatter, remarkGfm, [remarkCodeHike]],
      rehypePlugins: [
        // rehypePrism,
        rehypeSlug,
      ],
      providerImportSource: '@mdx-js/react',
    },
  }),
  /** @type {import('next').NextConfig} */
  {
    reactStrictMode: true,
    // experimental: {
    //    reactMode: 'concurrent',
    // },
    experimental: {
      outputStandalone: true,
    },
    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  },
]);

export default composedConfig;

I don't know how rollup work with .mjs, hope these information can provide a littile help

[pomber]

I couldn't reproduce it. It will help if you can create a minimal repo so I can debug it.

[DefectingCat]

I couldn't reproduce it. It will help if you can create a minimal repo so I can debug it.

Hi, i create a minimal repo, https://github.com/DefectingCat/code-hike-test.

It's installed mdx plugin and @code-hike/mdx@0.4.0-next.3.

Please visit http://localhost:3000/hello to reproduce it.

[pomber]

Ok, @code-hike/mdx@0.4.0-next.6 should fix your issue. There's an issue with React 18 though. I'm tracking it here #161

[DefectingCat]

Ok, @code-hike/mdx@0.4.0-next.6 should fix your issue. There's an issue with React 18 though. I'm tracking it here #161

It;s works with React 17. Thank you.

[github-actions[bot]]

:rocket: Issue was released in v0.4.0 :rocket: