require vs import syntax in react-codemirror2

Question

Totally confused by this example in react-codemirror2 which uses both import and require syntax; [See https://github.com/scniro/react-codemirror2 in the section requiring codemirror resources]

import CodeMirror from 'react-codemirror2'; 
require('codemirror/mode/xml/xml'); 
require('codemirror/mode/javascript/javascript');

I know the require('codemirror/etc') stuff is referring to a plain JS library dependency (not React specific), but why does require even work without throwing an error?

Can the require be replaced by an import? How to make the warning in VS Code editor go away?

Answer 1

The main idea of this part of the Docs is that you need to require by yourself CodeMirror modules that you needed (it means that if you need a javascript mode or autocomplete, you need to add these modules to your code).

react-codemirror2 doc says that:

How to import/require these assets will vary according to the specifics of your development environment

In most cases, both require and import will do the same, so you can use the code that is given in react-codemirror2 docs:

import CodeMirror from 'react-codemirror2'; 
require('codemirror/mode/xml/xml'); 
require('codemirror/mode/javascript/javascript');

or use its analog with imports:

import CodeMirror from 'react-codemirror2'; 
import 'codemirror/mode/xml/xml'; 
import 'codemirror/mode/javascript/javascript';