代码镜像将无法在我的React应用程序中运行

Question

I am attempting to create a Web IDE sort of like Eclipse Orion. The code editor that I plan to use is Code Mirror; the only difficulty is that I cannot get the code editor to load. Here is the error that I am encountering.

Here is the code that got me to this issue.

import React, { Component } from 'react';
import codemirror from 'codemirror';

import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/monokai.css';

class Editor extends Component {
  componentDidMount = () => {
    this.codeMirror = codemirror.fromTextArea(this.codeEditor, {
      mode: 'markdown'
    });
  };
  codeEditor = React.createRef();
  render = () => (
    <div>
      <textarea ref={this.codeEditor} />
    </div>
  );
}

export default Editor;

This issue has been stated many times here, but with no solution that made sense in my situation. Thanks in advance.

Answer 1

This code seemed to do the trick, it was just an issue with the ref .

import React, { Component } from 'react';
import codemirror from 'codemirror';

import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';

class Editor extends Component {
  componentDidMount = () => {
    this.codeMirror = codemirror(this.editor, {
      mode: 'markdown'
    });
  };
  ref = React.createRef();
  render = () => (
    <div>
      <div ref={self => this.editor = self} />
    </div>
  );
}

export default Editor;