React项目使用Prismjs报错Prism is not defined 间歇性异常求助

问题根因 #

报错是因为prism-clike、prism-javascript这类语言扩展组件依赖全局Prism对象才能运行，你的代码没有提前导入Prism核心库，直接导入扩展组件就会触发找不到Prism对象的报错。
间歇性异常是由于前端打包工具的模块导入顺序存在波动，偶尔核心库被优先加载时就可正常运行，否则直接报错，和你有没有修改代码、重装依赖没有关系，Bootstrap也和该异常无关。

修复方案 #

1. 调整模块导入顺序，先导入Prism核心库，再导入扩展组件，可直接替换你代码开头的导入部分：

import React, { useState } from 'react'
// 先导入Prism核心，再导入相关扩展
import Prism from 'prismjs'
import 'prismjs/themes/prism.css'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import Editor from 'react-simple-code-editor'
import {useCodex} from '../Context/CodexContext'

2. 如果调整顺序后仍偶发报错，可手动将Prism挂载到全局window对象上，确保扩展组件能读取到：

import Prism from 'prismjs'
// 新增这行手动挂载全局
window.Prism = Prism
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'

3. 补充语法高亮逻辑：你当前写的高亮函数仅添加了行号，没有调用Prism的语法高亮能力，可修改为如下实现：

const hightlightWithLineNumbers = (input) =>
    // 先调用Prism做语法高亮，再拼接行号
    Prism.highlight(input, Prism.languages.javascript, 'javascript')
        .split('\n')
        .map(
            (line, i) =>
                `<span class='editorLineNumber'>${i + 1}</span>${line}`
        )
        .join('\n')

内容的提问来源于stack exchange，提问作者santiago calvo