Hi all, having some issues with implementing a custom mode with defindeMode in V6 in a react app.
As the title states, I am getting an undefined error. I originally attempted this with the uiw/codemirror library, but it appears they don’t support a custom mode.

End result I want is for a token of 12312.53sddfsg.ssdjfs to have 3 separate colors based on their class / position in relation to the “.” separators

I am trying to use the editor to style a JWT token, and assign unique colors to each part of the token. From what I have read, a custom mode is required to achieve this. Here is a code snippet, any feedback would be appreciated, thanks!

import React, { useRef, useEffect, useState } from 'react'
import { EditorState, basicSetup } from '@codemirror/basic-setup'
import { EditorView } from '@codemirror/view'
export const CodeEditor = ({ setCodeEditorState }) => {
  const codeEditor = useRef()
  const [editorCode, setEditorCode] = useState('')
  const onUpdate = EditorView.updateListener.of((v) => {
    setEditorCode(v.state.doc.toString())
  useEffect(() => {
    const state = EditorState.create({
      doc: '',
      extensions: [
        basicSetup,
        onUpdate,
    const view = new EditorView({ state, parent: editor.current })
    return () => {
      view.destroy()
  }, [])
  useEffect(() => {
    // tried calling Codemirror.defineMode here, caused error
  }, [codeEditor])
  return <div ref={codeEditor} />