Syntax highlighting not working with webpack v4

[dflock]

BUG REPORT TEMPLATE

I think this issue is affecting vue-codemirror: codemirror/codemirror5#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'

[newxun]

Hello, I have encounted the problem, too. But it doesn't work by using the methods you provide ( webpack4.22.0 ).

[dflock]

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'

[Cannonb4ll]

Also experiencing the same, anyone managed to solve this?

[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

[ahmedash95]

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

adding below to package.json fixed it. also check white-listing-externals

  "electronWebpack": {
    "whiteListedModules": [
      "vue-codemirror"
    ]
  }

[followbin]

I tried the above methods, and finally found that all I need to do is:
use:
import VueCodemirror from 'vue-codemirror/src/index'
replace:
import VueCodemirror from 'vue-codemirror'
Others,just follow the README。

[ijustyce]

For me , I use :
import { codemirror } from 'vue-codemirror/src/index'
replace:
import { codemirror } from 'vue-codemirror'
fix the issue.

[HarmlessEvil]

Thanks, @ROTGP, it worked!

vue: 2.6.11
vue-codemirror: 4.0.6
webpack v4

[jajosheni]

if anyone is using nuxt, try to add it to the config file

nuxt.config.js

css: [
  'codemirror/lib/codemirror.css',
  'codemirror/theme/elegant.css',
  'codemirror/theme/base16-dark.css',
],