fix shiki codeblock error

src/plugins/shikiCodeblocks.desktop/components/Highlighter.tsx

@@ -22,9 +22,9 @@ import { shiki } from "@plugins/shikiCodeblocks.desktop/api/shiki";
 import { useShikiSettings } from "@plugins/shikiCodeblocks.desktop/hooks/useShikiSettings";
 import { useTheme } from "@plugins/shikiCodeblocks.desktop/hooks/useTheme";
 import { hex2Rgb } from "@plugins/shikiCodeblocks.desktop/utils/color";
-import { cl, hljs, shouldUseHljs } from "@plugins/shikiCodeblocks.desktop/utils/misc";
+import { cl, hljs, requireHljs, shouldUseHljs } from "@plugins/shikiCodeblocks.desktop/utils/misc";
 import { useAwaiter, useIntersection } from "@utils/react";
-import { React } from "@webpack/common";
+import { React, useEffect } from "@webpack/common";
 
 import { ButtonRow } from "./ButtonRow";
 import { Code } from "./Code";
@@ -43,13 +43,25 @@ export interface HighlighterProps {
     isPreview: boolean;
 }
 
-export const createHighlighter = (props: HighlighterProps) => (
-    <pre className={cl("container")}>
-        <ErrorBoundary>
-            <Highlighter {...props} />
-        </ErrorBoundary>
-    </pre>
-);
+let didLoadHljs = false;
+export const HighlighterContainer = (props: HighlighterProps) => {
+    const [_, _err, isPending] = useAwaiter(requireHljs);
+
+    useEffect(() => {
+        if (!isPending) didLoadHljs = true;
+    }, [isPending]);
+
+    if (!didLoadHljs && isPending) return null;
+
+    return (
+        <pre className={cl("container")}>
+            <ErrorBoundary>
+                <Highlighter {...props} />
+            </ErrorBoundary>
+        </pre>
+    );
+};
+
 export const Highlighter = ({
     lang,
     content,

src/plugins/shikiCodeblocks.desktop/index.tsx

@@ -24,12 +24,11 @@ import definePlugin, { ReporterTestable } from "@utils/types";
 import previewExampleText from "file://previewExample.tsx";
 
 import { shiki } from "./api/shiki";
-import { createHighlighter } from "./components/Highlighter";
+import { HighlighterContainer } from "./components/Highlighter";
 import deviconStyle from "./devicon.css?managed";
 import { settings } from "./settings";
 import { DeviconSetting } from "./types";
 import { clearStyles } from "./utils/createStyle";
-import { requireHljs } from "./utils/misc";
 
 export default definePlugin({
     name: "ShikiCodeblocks",
@@ -55,6 +54,7 @@ export default definePlugin({
             }
         }
     ],
+
     start: async () => {
         if (settings.store.useDevIcon !== DeviconSetting.Disabled)
             enableStyle(deviconStyle);
@@ -65,21 +65,12 @@ export default definePlugin({
         shiki.destroy();
         clearStyles();
     },
-    settingsAboutComponent: () => createHighlighter({
-        lang: "tsx",
-        content: previewExampleText,
-        isPreview: true
-    }),
+
+    settingsAboutComponent: () => <HighlighterContainer lang="tsx" content={previewExampleText} isPreview />,
 
     // exports
     shiki,
-    createHighlighter,
     renderHighlighter: ({ lang, content }: { lang: string; content: string; }) => {
-        requireHljs();
-        return createHighlighter({
-            lang: lang?.toLowerCase(),
-            content,
-            isPreview: false,
-        });
+        return <HighlighterContainer lang={lang?.toLowerCase()} content={content} isPreview={false} />;
     },
 });