Syntax highlighting not working with webpack v4

BUG REPORT TEMPLATE

I think this issue is affecting vue-codemirror: https://github.com/codemirror/CodeMirror/issues/5484

Vue.js version and component version

VueJs: 2.5.22 vue-codemirror: 4.0.6

Reproduction Link

As far as I can tell, this is a webpack related issue, so it would probably work fine on jsbin or other non-webpack environments.

Steps to reproduce

Create a new project using Vue cli v3 - i.e. using webpack v4. Add vue-codemirror.

What is Expected?

The codemirror instance should load its javascript & theme files, tokenize the input and apply highlighting.

What is actually happening?

It doesn’t tokenize input and therefore doesn’t apply syntax highlighting.

The fix

The fix from here appears to work. If you change this:

import _CodeMirror from 'codemirror'

to this:

import _CodeMirror from 'codemirror/lib/codemirror.js'

in both codemirror.vue & index.js, that seems to fix things. I’m not sure if this is the “correct” way to fix this, so I’ve just made the change locally for now.

If you modify codemirror.vue and/or index.js then you will need to pull these into your project - i.e. don’t use the upstream npm package (from your node_modules) anymore, use your locally modified version.

So, copy the those two files out of your node_modules/vue-codemirror/ folder, into a folder in your project, say src/components/vue-codemirror/, modify them, then change your import line from this:

import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

to this:

import { codemirror } from '@/components/vue-codemirror'
import 'codemirror/lib/codemirror.css'

[Chieftl]

I found simpler solution, without custom component. Just import “mode” file after codemirror import. For example, for javascript:

import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/javascript/javascript'

But custom component is needed for using inside Electron.

[ROTGP]

If using Electron-Vue, add 'vue-codemirror' to the array whiteListedModules inside .electron-vue/webpack.renderer.config.js