Getting SyntaxError: Invalid regular expression in production build in Next.js but working fine in development mode

[PriyobrotoKar]

Describe the issue/behavior that seems buggy I am getting a Application error: a client-side exception has occurred (see the browser console for more information) in the production build but not in development mode. I need help...

Here is the error in brower's console:

SyntaxError: Invalid regular expression: /(?!-)([!#\$%&*+.\\/<=>?@\\\\^~-]|(?!([(),;\\[\\]\`|{}]|[_:"']))(\\p{S}|\\p{P}))--+|--+(?!-)([!#\$%&*+.\\/<=>?@\\\\^~-]|(?!([(),;\\[\\]\`|{}]|[_:"']))(\\p{S}|\\p{P}))/mu: Invalid escape
    at RegExp (<anonymous>)
    at t (5548-712049cab3b9f644.js:1:15197)
    at a (5548-712049cab3b9f644.js:1:17673)
    at 5548-712049cab3b9f644.js:1:18319
    at Array.forEach (<anonymous>)
    at a (5548-712049cab3b9f644.js:1:18299)
    at 5548-712049cab3b9f644.js:1:18571
    at R (5548-712049cab3b9f644.js:1:18575)
    at 5548-712049cab3b9f644.js:1:19606
    at Array.map (<anonymous>)

Sample Code or Instructions to Reproduce This is the client component :

"use client";
import hljs from "highlight.js";
import { useEffect, useState } from "react";

const Codeblock = ({ children }: { children: string }) => {
  const [language, setLanguage] = useState<string | undefined>("");
  const [mounted, setIsMounted] = useState(false);
  useEffect(() => {
    console.log(children);
    console.log(mounted);
    if (mounted) {
      hljs.safeMode();
      hljs.highlightAll();
    }
  }, [mounted, children]);

  useEffect(() => {
    if (typeof window !== "undefined") {
      setIsMounted(true);
    }
  }, []);
  if (!mounted) {
    return;
  }
  return (
    <>
      <pre className="relative">
        <code className="bg-none">{children}</code>
      </pre>
    </>
  );
};

export default Codeblock;

And I am calling the client component in the parent like this: return <Codeblock key={uuid()}>{innerHTML}</Codeblock>;

Expected behavior It should highlight the code in the production build like in the development mode, but its showing this error.

[fujita-h]

I'm having the same issue on my Next.js production build. From the regular expression pattern output in the error, I found that it was a Haskell grammar. https://github.com/highlightjs/highlight.js/blob/105a11a13eedbf830c0e80cc052028ceb593837f/src/languages/haskell.js#L17-L24

The error no longer occurs by excluding Haskell's grammar. If you don't need Haskell's grammar, the easiest workaround is to not use it.

Additionally, in my environment, this issue did not occur with Next.js 14.1.1, but did occur with Next.js 14.1.3. Considering that the problem does not occur in dev mode but occurs in production, the problem may be in Next.js.

[joshgoebel]

Does it work if you only remove the uniSymbol portion of Haskell?

[joshgoebel]

5548-712049cab3b9f644.js

Please use the library on it's own without running it thru a build system to confirm the build system itself is not the problem. The builds we provide work - the regex you list above does seem to be broken - but that's an artifact of your build system, not something we ship.

[joshgoebel]

Closing for lack of response. Right now it appears to be a broken build system producing an invalid build product.

[triozer]

Closing for lack of response. Right now it appears to be a broken build system producing an invalid build product.

@joshgoebel I'm reopening this issue as I'm experiencing the same problem. After some investigation, I discovered a related issue in the Next.js repository, which suggests that the problem persists. It appears that the Next.js build system does not fully support the regular expressions used in Haskell, as outlined in #3982. This might be causing the broken build system to produce an invalid build product. Without a viable workaround, other than the excluding Haskell.

[joshgoebel]

which suggests that the problem persists.

Yes, it's only closed here because it's obviously not our issue - not our code. The related issue you linked to is pretty clear... once this is fixed in Next.js then all should be well. Nothing we can do.

Without a viable workaround

Seems the related issue offered a viable workaround of using plugin-transform-unicode-regex to transcode the JS back to something Next.js doesn't currently choke on. Also seems running an older path release of Next.js might fix things?

[triozer]

Nothing we can do.

Yes, I was just trying to document why this issue was happening and redirect user to the Next.js issue. So this one can be closed again. :)

[kasvith]

Hi, for nextjs adding highlight.js to https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages solved the issue