Error: Expected onClick listener to be a function, instead got a value of string type.

[Vallerian]

I am encountering an error while using the rehype-pretty-code package in a Next.js project, specifically when utilizing the transformerCopyButton feature. The error message I receive is:

Error: Expected `onClick` listener to be a function, instead got a value of `string` type.

This error seems to occur when the transformerCopyButton attempts to render the copy button for code blocks. It appears that the onClick event listener is being assigned a string value instead of a function.

Next.js version: 14.2.5
rehype-pretty version: 0.13.2

next.config.mjs

import createMDX from '@next/mdx'
import remarkSlug from 'remark-slug'
import rehypePrettyCode from "rehype-pretty-code";
import remarkGfm from 'remark-gfm'
import remarkFrontmatter from 'remark-frontmatter'
import {transformerCopyButton} from "@rehype-pretty/transformers";


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

const withMDX = createMDX({
    extension: /\.mdx?$/,
    options: {
        remarkPlugins: [
            [remarkFrontmatter],
            [remarkGfm],
            [remarkSlug],
        ],
        rehypePlugins: [
            [rehypePrettyCode, {
                theme: "github-dark-default",
                transformers: [
                    transformerCopyButton({
                        visibility: 'hover',
                        feedbackDuration: 2_000,
                    }),
                ]
            }],
        ],
    },
});


export default withMDX(nextConfig)

[haris989]

Hi Vallerian,
Getting the same error. Any luck?

[Vallerian]

Unfortunately, no, but if you find a way to extract the content of code blocks within React components using Rehype or Remark plugins, like remark-code-blocks, I'd be happy if you let me know.

[o-az]

unfortunately the copy button transformer currently doesn't work with Next.js unless you use a Server Component

Example implementation:
https://github.com/rehype-pretty/rehype-pretty-code/blob/master/examples/next/src/app/code.tsx

demo: https://rehype-pretty-example-next.pages.dev/rsc

[2wndrhs]

You can easily add a custom pre component with a copy button.

• custom pre component to be used in MDX files

'use client';

import { Check, Clipboard } from 'lucide-react';
import { DetailedHTMLProps, HTMLAttributes, useRef, useState } from 'react';

export default function Pre({
  children,
  ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>) {
  const [isCopied, setIsCopied] = useState(false);
  const preRef = useRef<HTMLPreElement>(null);

  const handleClickCopy = async () => {
    const code = preRef.current?.textContent;

    if (code) {
      await navigator.clipboard.writeText(code);
      setIsCopied(true);

      setTimeout(() => {
        setIsCopied(false);
      }, 3000);
    }
  };

  return (
    <pre ref={preRef} {...props} className='relative'>
      <button
        disabled={isCopied}
        onClick={handleClickCopy}
        className='absolute right-4 size-6'
      >
        {isCopied ? <Check /> : <Clipboard />}
      </button>
      {children}
    </pre>
  );
}

• mdx-component.tsx (if you are using @next/mdx)

import type { MDXComponents } from 'mdx/types';
import Pre from './components/mdx/Pre';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    pre: (props) => <Pre {...props} />,
    ...components,
  };

• Result

[shiny]

I encountered the same issue when rendering the MDX file and am still seeking a better solution.