Syntax highlighting not working on Vite

[jacob]

I have a project with codemirror, vue 2 and webpack that works great! It uses lang-html extension to format, and gets color highlighting. I updated it to vue 3 with vite, and the highlighting no longer works. I inspected dom, and the html code in the state is not being parsed into tokens in order to style. Any ideas?

[marijn]

Possibly when upgrading, some of the @codemirror packages got duplicated. Yarn and older versions of npm do this. Reinstalling all dependencies, or upgrading to a recent npm, might help with this.

[jacob]

Hi @marijn I deleted package-lock.json and node_modules, and still the same.

[jacob]

I figured it out.

There are a number of discussions such as here:

Highlighting that seems ignored in CM6

FWIW, I ran into this same issue and the fix for me was disabling dependency injection in my vite.config.js for the @lezer/highlight package. optimizeDeps: { exclude: [ 'codemirror', '@codemirror/commands', '@codemirror/language', '@codemirror/state', '@codemirror/view', '@codemirror/lang-sql', '@lezer/highlight' ] }

that say you have to set optimizeDeps.exclude. I was doing that, but using glob pattern that is not supported. I had to look in the vite code to discover that:

vitejs/vite/blob/b1ecdaf6594b48d2fcbff8682e9ef68916806089/packages/vite/src/node/optimizer/index.ts#L74-L78

I switched to using explicit module paths, and it works now!

Highlighting that seems ignored in CM6

I had a similar issue when upgrading from v0.19 to v6.0.0. I have an editor for JSON in a SvelteKit+Vite project. This did throw the following error: CodeMirror plugin crashed: TypeError: tags3 is undefined Clearing node_modules didn’t solve anything, and there are no v0.19 packages left in my dependencies. The workaround by Francesco (May 5) works this for me, wrapping highlighter.style with a function that passes tags || [] to the original function.