Broken Syntax Highlighting

v6
1

I am building a React app with Codemirror 6, and while setting up syntax highlighting was a breeze, it has stopped working for some reason, and all the text is grey now. I have recreated the Editor Component that is giving me trouble here.

import React, { useRef, useEffect }  from 'react';
import { EditorState } from "@codemirror/state";
import { EditorView } from "@codemirror/view";
import { basicSetup } from 'codemirror';
import { python } from '@codemirror/lang-python';
import 'bootstrap/dist/css/bootstrap.min.css';

const defaultText = `def fizzbuzz():
  for i in range(100):
    if i % 3 == 0 and i % 5 == 0:
      print("FizzBuzz")
    elif i % 3 == 0:
      print("Fizz")
    elif i % 5 == 0:
      print("Buzz")
    else:
      print(i)
`

const TestEditor = () => {
    const editor = useRef();
  
    useEffect(() => {
      const start = EditorState.create({
        doc: defaultText,
        contentHeight: 50,
        extensions: [
          basicSetup,
          python(),
        ]
      });
      const view = new EditorView({
        state: start,
        parent: editor.current
      });
  
      return () => {
        view.destroy();
      };
    }, []);

    return <div className="col-md-10" ref={editor}></div>;
  }

  export default TestEditor;

I am using the webpack bundler and have tried deleting package-lock.json and the node_modules directory and running npm cache clean --force. As far as I can tell, my code follows the examples correctly. Is there something obviously wrong with my code, or should I use a different bundler?

2

The code looks fine. Did you verify that your npm tree is deduplicated? (npm ls -a | grep -v deduped) Does your bundler tool provide any way to see precisely which packages and versions it is bundling? Iā€™m not very familiar with webpack, but sometimes bundlers do weird things when resolving packages.

1 Like
3

I rebundled my project with rollup, and it seems to be working fine now. Thank you for your help.