Blog development experience and thoughts

For the past few hours, I've been trying to figure out why my blog was not able to load correctly on demand when hosted on vercel. I have been constantly getting this error from Vercel

SyntaxError: Invalid regular expression: /(?!-)([!#\$%&*+.\\/<=>?@\\\\^~-]|(?!([(),;\\[\\]\`|{}]|[_:"']))(\\p{S}|\\p{P}))--+|--+(?!-)([!#\$%&*+.\\/<=>?@\\\\^~-]|(?!([(),;\\[\\]\`|{}]|[_:"']))(\\p{S}|\\p{P}))/mu: Invalid escape
    at RegExp (<anonymous>)
    at t (/vercel/path0/.next/server/app/blog/[slug]/page.js:1:18510)
    at a (/vercel/path0/.next/server/app/blog/[slug]/page.js:1:20986)
    at /vercel/path0/.next/server/app/blog/[slug]/page.js:1:21632
    at Array.forEach (<anonymous>)
    at a (/vercel/path0/.next/server/app/blog/[slug]/page.js:1:21612)
    at /vercel/path0/.next/server/app/blog/[slug]/page.js:1:21884
    at R (/vercel/path0/.next/server/app/blog/[slug]/page.js:1:21888)
    at /vercel/path0/.next/server/app/blog/[slug]/page.js:1:22919
    at Array.map (<anonymous>)

While I was trying to debug this issue, I found this error would only occur under the circumstance of using next build to build the project, everything works very smoothly when using next dev during local development. This is the typical case of "it works on my machine" haha.

My initial approach was to trying to find out where exactly the error was coming from, because I barely use any regex in my code, even if there is any, it is definitely not included in any part of the route /blog/[slug]. However, as you can see from the error trace back, it is not very helpful with all those generated js files and function calls from (<anonymous>). This is probably my most complaints about all these web frameworks, or web development in general, that it is very hard to debug and trace back the error with all the generated js files and chunks. At least for my last two projects working with Nextjs, once thing I learned is that you really need to know about EVERYTHING about the framework and projects. These frameworks work like magic, but once something goes wrong, it is time for you to figure every single spell they are using.

Getting back to the error, I eventually had to get down to file (/vercel/path0/.next/server/app/blog/[slug]/page. js:1:21612) and found out that it was caused by highlight.js (by searching for error message in their repo!!!!!!), a javascript file I have included to render the code blocks in mdx with syntax highlights. The root cause of the error is the fact that this highlight.js should be downloaded by website visitors, and it will colorize the code blocks at their end, which is essentially to say it should be part of the "use client", however usually with Next.js, if a component or library is only used in the client side, it should prompt an error message somewhere during the development process, but this time it didn't. I am not sure if this is a bug or not, but I am pretty sure this should never be the expected behavior.