Loading CodeMirror with webpack (solved)

[correnson]

Hi all,

I report here an issue that is somehow related to #4838 and to other similar open questions on various forums. I found the problem when using webpack, but I think the issue also comes when simply using import. There is no « bug » to fix in the code distribution, but I think something could be added in the installation page of the (awesome) CodeMirror manual, which covers many importation schemes but not import explicitly.

Here is the story (with suitable webpack & babel configuration):

1. Install CodeMirror with yarn add codemirror (or using npm).
2. Using import CodeMirror from 'codemirror'; works as expected. Good!
3. Adds import 'codemirror/theme/<myTheme>.css'; for your favorite theme. Very Good!
4. Adds import 'codemirror/mode/javascript/javascript.js'; seems to Work (no error in console)...
5. However, selecting the mode does nothing. Worst: CodeMirror.modes reveals to be empty!
6. Change step 2 with: import CodeMirror from 'codemirror/lib/codemirror.js'; then every thing works magically. Yeah!

Remark: this simple fix in step #6 above also works with electron + webpack + react + react-hot-loader, contrarily with negative comments found here and there on the web.

Explanation: after deep debugging, it appears that when using import CodeMirror from 'codemirror', the adds-on and modes register themselves in an instance of CodeMirror that is different from the imported one.

Actually, all CodeMirror adds-on and modes are using relative paths to their parent '../lib/codemirror.js' module. However, it seems that the module cache (whoever is responsible for it) is confused and does not identify '<cm>' with '<cm>/lib/codemirror.js' even if '<cm>/package.json' properly specifies that the main entry is at ./lib/codemirror.js'.

[marijnh]

it seems that the module cache (whoever is responsible for it)

I think that's Webpack in this case, and I think that should be reported as a bug there. I'm not really interested in adding workarounds for bugs in other tools to CodeMirror's manual (hopefully, they'll go away soon enough).

[correnson]

Fair enough 👍

[AdamZaczek]

Thanks @correnson, works like a charm !

[onfuns]

Thanks,Solved my problem.

[truongnmt]

Working on Rails 6! Thank you 3000!

[fabianzwodrei]

@truongnmt how did you import CodeMirror in Rails6? Did you use webpacker?

[bibisixtynine]

Magic thanks @correnson for sharing how to import CodeMirror ! I was about to get mad !

[hrshlmeht]

Its not allowing me to import from text area and is throwing errors