Codemirror lint feature not working react-codemirror in React/Redux/Typescript App

Question

I'm trying to enable the linting addon of the react-codemirror component in a React/Redux/TS app. The normal codemirror stuff works fine, syntax highlighting, line numbers, etc. However, enabling linting adds the extra padding on the left for the lint messages to the component, but no messages are displayed.

I have a suspicion its something about the codemirror lint.js code not loading, but I'm not sure why. Relevant code snippets below:

import * as CodeMirror from 'react-codemirror';
import '../../../node_modules/codemirror/mode/javascript/javascript';
import '../../../node_modules/codemirror/addon/lint/lint';
import '../../../node_modules/codemirror/addon/lint/javascript-lint';
import '../../../node_modules/jshint/dist/jshint';

...

<CodeMirror
    options={{
        lineNumbers: true,
        readOnly: false,
        mode: 'javascript',
        lint: true,
        gutters: ['CodeMirror-lint-markers']
    }}
/>

Has anyone been able to get this addon working successfully?

Answer 1

You need to load the lint CSS

codemirror/addon/lint/lint.css

and any other CSS for code mirror.

Also, for further clarification here are my imports:

import CodeMirror from 'react-codemirror'
import { JSHINT } from 'jshint'

import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript'

window.JSHINT = JSHINT

And don't forget these options:

var options = {
  mode: 'javascript',
  gutters: ['CodeMirror-lint-markers'],
  lint: true
}

Answer 2

I had a similar issue and fixed it by making jshint available on the window by replacing:

import '../../../node_modules/jshint/dist/jshint';

with

(<any>window).JSHINT = require('jshint').JSHINT;