shiki with proper transpilation

apps/web/next.config.mjs

@@ -72,6 +72,8 @@ const createCspHeader = (isEmbed = false) => {
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
+  // Transpile ESM packages
+  transpilePackages: ['shiki'],
   // ESLint configuration
   eslint: {
     ignoreDuringBuilds: false,

apps/web/src/components/ui/typography/SyntaxHighlight/SyntaxHighlighter.tsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useState, useRef } from 'react';
+'use client';
+
+import React, { useEffect, useState } from 'react';
 import { cn } from '@/lib/classMerge';
 import { getCodeTokens } from './shiki-instance';
 import styles from './SyntaxHighlighter.module.css';

apps/web/src/components/ui/typography/SyntaxHighlight/shiki-instance.ts

@@ -1,5 +1,7 @@
-import { createHighlighterCore, HighlighterCore } from 'shiki/core';
-import type { ShikiTransformer } from 'shiki';
+'use client';
+
+import type { ShikiTransformer, HighlighterCore } from 'shiki';
+import { createHighlighterCore } from 'shiki/core';
 import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
 import githubLight from '@shikijs/themes/github-light';
 import githubDark from '@shikijs/themes/github-dark';