没有定义不工作错误的棱镜

Question

我试图使用棱镜来制作一个代码编辑器，我从这个代码框这里中复制了一个模板。错误是：

./node_modules/prismjs/components/prism-clike.js
E:/Trabajos/Personal projects/OpenAI/Code translator/code-tranlator/node_modules/prismjs/components/prism-clike.js:1
> 1 | Prism.languages.clike = {
  2 |   'comment': [
  3 |       {
  4 |           pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,

对于我正在使用的某些上下文，代码一开始起作用，然后停止工作，然后在我什么都不做的情况下重新开始工作，这很奇怪，我尝试卸载依赖项并重新安装它们，但没有成功，我搜索了整个互联网，但是没有太多关于这个主题的信息(如果有的话)，所以我被困住了。

这是组件的相关代码：

import React, { useState } from 'react'
import Editor from 'react-simple-code-editor'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism.css'
import {useCodex} from '../Context/CodexContext'

export default function CodeEditor() {
    
    const { getCompletion } = useCodex();

    const code = `function add(a, b) {
        return a + b;
      }
      
      const a = 123;
      `

    const hightlightWithLineNumbers = (input) =>
        input
            .split('\n')
            .map(
                (line, i) =>
                    `<span class='editorLineNumber'>${i + 1}</span>${line}`
            )
            .join('\n')

    const [codeValue, setCodeValue] = useState(code)

    function handleSubmit(e) {
        e.preventDefault()
        getCompletion("translate this code from javascript to python " + codeValue);
        console.log("code value: ", codeValue);
    }

    return (
        <div className="container">
            <div className="row justify-content-center align-items-center">
                <Editor
                    value={codeValue}
                    onValueChange={(code) => setCodeValue(code)}
                    highlight={(code) => hightlightWithLineNumbers(code)}
                    padding={10}
                    textareaId="codeArea"
                    className="editor"
                    style={{
                        fontFamily: '"Fira code", "Fira Mono", monospace',
                        fontSize: 18,
                        outline: 0,
                    }}
                />
                <button className="btn btn-primary rounded w-25 my-5">asd</button>
            </div>
        </div>
    )
} 

note1:我不知道这是否相关，但我使用的是节点安装的引导程序。

Answer 1

在我使用棱镜的反应项目中，我也面临着同样的问题。我通过安装棱镜库和导入来解决这个问题，如下所示：

import Prism from "prismjs";

这应该能解决你的问题！