diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs
index 69614456a..845e83af6 100644
--- a/apps/web/next.config.mjs
+++ b/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,
diff --git a/apps/web/src/components/ui/typography/SyntaxHighlight/SyntaxHighlighter.tsx b/apps/web/src/components/ui/typography/SyntaxHighlight/SyntaxHighlighter.tsx
index 7e4482f28..719a444f6 100644
--- a/apps/web/src/components/ui/typography/SyntaxHighlight/SyntaxHighlighter.tsx
+++ b/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';
diff --git a/apps/web/src/components/ui/typography/SyntaxHighlight/shiki-instance.ts b/apps/web/src/components/ui/typography/SyntaxHighlight/shiki-instance.ts
index a672d6071..042ba191e 100644
--- a/apps/web/src/components/ui/typography/SyntaxHighlight/shiki-instance.ts
+++ b/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';