From 420b4754e00a87761e4a2bf33f12c08df3913a97 Mon Sep 17 00:00:00 2001 From: waleed Date: Mon, 29 Jun 2026 10:05:25 -0700 Subject: [PATCH] fix(prism): load prismjs core before language components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit prismjs language components (prismjs/components/prism-*) register on the global Prism that core installs; importing a component before core throws 'Prism is not defined' (in SSR and the client). The @sim/emcn extraction changed bundling so core no longer loaded eagerly first, exposing the latent bad order on the home (chat-content) and workflow-editor pages. - chat-content.tsx: import prismjs core first (it needs ts/bash/css/markup, which emcn does not register). - code-editor.tsx, input-format.tsx, code.tsx: drop the redundant prism-json/prism-python imports — these highlight via emcn's languages, which already registers js/json/python in the correct order. --- .../message-content/components/chat-content/chat-content.tsx | 3 +++ .../editor/components/sub-block/components/code/code.tsx | 5 ++--- .../components/sub-block/components/starter/input-format.tsx | 5 ++--- .../tool-input/components/code-editor/code-editor.tsx | 1 - 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx index ce91dd27165..afeac25cc3b 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx @@ -3,6 +3,9 @@ import { type ComponentPropsWithoutRef, memo, useEffect, useMemo, useRef } from 'react' import { Streamdown } from 'streamdown' import 'streamdown/styles.css' +// prismjs core must load before its language components — they register on the +// global `Prism` it installs (on `window`/`global`); fixes SSR + client order. +import 'prismjs' import 'prismjs/components/prism-typescript' import 'prismjs/components/prism-bash' import 'prismjs/components/prism-css' diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx index 6fe84a9ae1a..bc3972c4b94 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx @@ -1,8 +1,5 @@ import type { ReactElement } from 'react' import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react' -import { Check, Wand2 } from 'lucide-react' -import { useParams } from 'next/navigation' -import 'prismjs/components/prism-python' import { CODE_LINE_HEIGHT_PX, Code as CodeEditor, @@ -14,6 +11,8 @@ import { languages, } from '@sim/emcn' import { createLogger } from '@sim/logger' +import { Check, Wand2 } from 'lucide-react' +import { useParams } from 'next/navigation' import Editor from 'react-simple-code-editor' import { Button } from '@/components/ui/button' import { CodeLanguage } from '@/lib/execution/languages' diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx index 5657c65739d..82f3e157781 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx @@ -1,7 +1,4 @@ import { useCallback, useRef } from 'react' -import { Trash } from '@sim/emcn/icons' -import { Plus } from 'lucide-react' -import 'prismjs/components/prism-json' import { Badge, Button, @@ -19,6 +16,8 @@ import { Label, languages, } from '@sim/emcn' +import { Trash } from '@sim/emcn/icons' +import { Plus } from 'lucide-react' import Editor from 'react-simple-code-editor' import { createDefaultInputFormatField } from '@/lib/workflows/input-format' import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text' diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx index 80120122600..a6df56db169 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx @@ -1,6 +1,5 @@ import type { ReactElement } from 'react' import { useEffect, useRef, useState } from 'react' -import 'prismjs/components/prism-json' import { CODE_LINE_HEIGHT_PX, Code,