fix(prism): load prismjs core before language components (#5262)

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.
This commit is contained in:
Waleed
2026-06-29 10:34:00 -07:00
committed by GitHub
parent f5116f45c3
commit 56f9393d7e
4 changed files with 7 additions and 7 deletions
@@ -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'
@@ -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'
@@ -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'
@@ -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,