Failure to use the simplest JavaScript example

With shame, I have to give up and ask about the simplest possible example, after many attempts.

I’m just trying to recreate Try example, the default one with JavaScript support.

Currently, it is:

import {basicSetup, EditorView} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"

let view = new EditorView({
  doc: "console.log('hello')\n",
  extensions: [basicSetup, javascript()],
  parent: document.querySelector("#editor")
})

where my HTML is trivial:

<body>
    <div id="editor"></div>
    <script src="public/bundle.js"></script>
</body>

and Rollup config:

import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.mjs', // the file where you import and set up CodeMirror
  output: {
    file: 'public/bundle.js', // the output file
    format: 'iife',
  },
  plugins: [
    nodeResolve()
  ],
};

In theory it works as expected:
image

But as you can see, there is no syntax highlighting. And apparently input is not parsed, because this line is rendered just as:

<div class="cm-activeLine cm-line">console.log('hello world!')</div>

instead of Try example’s additional span for string literal:

<div class="cm-activeLine cm-line">console.log(<span class="ͼe">'hello'</span>)</div>

Apparently I’m missing something obvious. Please help!

PS. In package.json I have:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },

Can you show the output of npm ls -a? If there’s duplicate instances of @codemirror or @lezer packages you might get this effect.

1 Like

Here’s the result, not sure how to interpret it:

crowdpub-app@1.0.0 D:\github\crowdpub\crowdpub-app
+-- @codemirror/basic-setup@0.20.0
| +-- @codemirror/autocomplete@0.20.3
| | +-- @codemirror/language@0.20.2 deduped
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7
| | | +-- @codemirror/state@0.20.1 deduped
| | | +-- style-mod@4.0.3 deduped
| | | `-- w3c-keyname@2.2.8 deduped
| | `-- @lezer/common@0.16.1
| +-- @codemirror/commands@0.20.0
| | +-- @codemirror/language@0.20.2 deduped
| | +-- @codemirror/state@0.20.1 deduped
| | +-- @codemirror/view@0.20.7 deduped
| | `-- @lezer/common@0.16.1 deduped
| +-- @codemirror/language@0.20.2
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7
| | | +-- @codemirror/state@0.20.1 deduped
| | | +-- style-mod@4.0.3 deduped
| | | `-- w3c-keyname@2.2.8 deduped
| | +-- @lezer/common@0.16.1 deduped
| | +-- @lezer/highlight@0.16.0
| | | `-- @lezer/common@0.16.1 deduped
| | +-- @lezer/lr@0.16.3
| | | `-- @lezer/common@0.16.1 deduped
| | `-- style-mod@4.0.3 deduped
| +-- @codemirror/lint@0.20.3
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7
| | | +-- @codemirror/state@0.20.1 deduped
| | | +-- style-mod@4.0.3 deduped
| | | `-- w3c-keyname@2.2.8 deduped
| | `-- crelt@1.0.6
| +-- @codemirror/search@0.20.1
| | +-- @codemirror/state@0.20.1
| | +-- @codemirror/view@0.20.7
| | | +-- @codemirror/state@0.20.1 deduped
| | | +-- style-mod@4.0.3 deduped
| | | `-- w3c-keyname@2.2.8 deduped
| | `-- crelt@1.0.6 deduped
| +-- @codemirror/state@0.20.1
| `-- @codemirror/view@0.20.7
|   +-- @codemirror/state@0.20.1 deduped
|   +-- style-mod@4.0.3 deduped
|   `-- w3c-keyname@2.2.8 deduped
+-- @codemirror/commands@6.2.4
| +-- @codemirror/language@6.7.0
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | +-- @lezer/common@1.0.3 deduped
| | +-- @lezer/highlight@1.1.6
| | | `-- @lezer/common@1.0.3 deduped
| | +-- @lezer/lr@1.3.6
| | | `-- @lezer/common@1.0.3 deduped
| | `-- style-mod@4.0.3 deduped
| +-- @codemirror/state@6.2.1 deduped
| +-- @codemirror/view@6.13.0 deduped
| `-- @lezer/common@1.0.3
+-- @codemirror/lang-javascript@6.1.9
| +-- @codemirror/autocomplete@6.9.0
| | +-- @codemirror/language@6.8.0 deduped
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | `-- @lezer/common@1.0.3 deduped
| +-- @codemirror/language@6.8.0
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | +-- @lezer/common@1.0.3 deduped
| | +-- @lezer/highlight@1.1.6
| | | `-- @lezer/common@1.0.3 deduped
| | +-- @lezer/lr@1.3.9
| | | `-- @lezer/common@1.0.3 deduped
| | `-- style-mod@4.0.3 deduped
| +-- @codemirror/lint@6.4.0
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | `-- crelt@1.0.6 deduped
| +-- @codemirror/state@6.2.1 deduped
| +-- @codemirror/view@6.13.0 deduped
| +-- @lezer/common@1.0.3
| `-- @lezer/javascript@1.4.5
|   +-- @lezer/highlight@1.1.6
|   | `-- @lezer/common@1.0.3
|   `-- @lezer/lr@1.3.9
|     `-- @lezer/common@1.0.3 deduped
+-- @codemirror/state@6.2.1
+-- @codemirror/view@6.13.0
| +-- @codemirror/state@6.2.1 deduped
| +-- style-mod@4.0.3
| `-- w3c-keyname@2.2.8
+-- @retronav/ixora@0.3.3
| +-- @codemirror/commands@6.2.4 deduped
| +-- @codemirror/lang-html@6.4.5
| | +-- @codemirror/autocomplete@6.9.0
| | | +-- @codemirror/language@6.8.0 deduped
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | `-- @lezer/common@1.0.3 deduped
| | +-- @codemirror/lang-css@6.2.0
| | | +-- @codemirror/autocomplete@6.9.0
| | | | +-- @codemirror/language@6.8.0 deduped
| | | | +-- @codemirror/state@6.2.1 deduped
| | | | +-- @codemirror/view@6.13.0 deduped
| | | | `-- @lezer/common@1.0.3 deduped
| | | +-- @codemirror/language@6.8.0
| | | | +-- @codemirror/state@6.2.1 deduped
| | | | +-- @codemirror/view@6.13.0 deduped
| | | | +-- @lezer/common@1.0.3 deduped
| | | | +-- @lezer/highlight@1.1.6
| | | | | `-- @lezer/common@1.0.3 deduped
| | | | +-- @lezer/lr@1.3.9
| | | | | `-- @lezer/common@1.0.3 deduped
| | | | `-- style-mod@4.0.3 deduped
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @lezer/common@1.0.3
| | | `-- @lezer/css@1.1.3 deduped
| | +-- @codemirror/lang-javascript@6.1.9 deduped
| | +-- @codemirror/language@6.8.0
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | +-- @lezer/common@1.0.3 deduped
| | | +-- @lezer/highlight@1.1.6
| | | | `-- @lezer/common@1.0.3 deduped
| | | +-- @lezer/lr@1.3.9
| | | | `-- @lezer/common@1.0.3 deduped
| | | `-- style-mod@4.0.3 deduped
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | +-- @lezer/common@1.0.3
| | +-- @lezer/css@1.1.3
| | | +-- @lezer/highlight@1.1.6
| | | | `-- @lezer/common@1.0.3
| | | `-- @lezer/lr@1.3.9
| | |   `-- @lezer/common@1.0.3 deduped
| | `-- @lezer/html@1.3.6
| |   +-- @lezer/common@1.0.3
| |   +-- @lezer/highlight@1.1.6
| |   | `-- @lezer/common@1.0.3 deduped
| |   `-- @lezer/lr@1.3.9
| |     `-- @lezer/common@1.0.3 deduped
| +-- @codemirror/lang-markdown@6.2.0
| | +-- @codemirror/autocomplete@6.9.0
| | | +-- @codemirror/language@6.8.0 deduped
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | `-- @lezer/common@1.0.3 deduped
| | +-- @codemirror/lang-html@6.4.5 deduped
| | +-- @codemirror/language@6.8.0
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | +-- @lezer/common@1.0.3 deduped
| | | +-- @lezer/highlight@1.1.6
| | | | `-- @lezer/common@1.0.3 deduped
| | | +-- @lezer/lr@1.3.9
| | | | `-- @lezer/common@1.0.3 deduped
| | | `-- style-mod@4.0.3 deduped
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | +-- @lezer/common@1.0.3
| | `-- @lezer/markdown@1.0.5 deduped
| +-- @codemirror/language@6.8.0
| | +-- @codemirror/state@6.2.1 deduped
| | +-- @codemirror/view@6.13.0 deduped
| | +-- @lezer/common@1.0.3 deduped
| | +-- @lezer/highlight@1.1.6 deduped
| | +-- @lezer/lr@1.3.9
| | | `-- @lezer/common@1.0.3 deduped
| | `-- style-mod@4.0.3 deduped
| +-- @codemirror/legacy-modes@6.3.3
| | `-- @codemirror/language@6.8.0
| |   +-- @codemirror/state@6.2.1 deduped
| |   +-- @codemirror/view@6.13.0 deduped
| |   +-- @lezer/common@1.0.3
| |   +-- @lezer/highlight@1.1.6
| |   | `-- @lezer/common@1.0.3 deduped
| |   +-- @lezer/lr@1.3.9
| |   | `-- @lezer/common@1.0.3 deduped
| |   `-- style-mod@4.0.3 deduped
| +-- @codemirror/state@6.2.1 deduped
| +-- @codemirror/view@6.13.0 deduped
| +-- @lezer/common@1.0.3
| +-- @lezer/highlight@1.1.6
| | `-- @lezer/common@1.0.3 deduped
| +-- @lezer/markdown@1.0.5
| | +-- @lezer/common@1.0.3
| | `-- @lezer/highlight@1.1.6
| |   `-- @lezer/common@1.0.3 deduped
| +-- codemirror@6.0.1
| | +-- @codemirror/autocomplete@6.9.0
| | | +-- @codemirror/language@6.8.0 deduped
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | `-- @lezer/common@1.0.3
| | +-- @codemirror/commands@6.2.4 deduped
| | +-- @codemirror/language@6.8.0
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | +-- @lezer/common@1.0.3 deduped
| | | +-- @lezer/highlight@1.1.6
| | | | `-- @lezer/common@1.0.3 deduped
| | | +-- @lezer/lr@1.3.9
| | | | `-- @lezer/common@1.0.3 deduped
| | | `-- style-mod@4.0.3 deduped
| | +-- @codemirror/lint@6.4.0
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | `-- crelt@1.0.6 deduped
| | +-- @codemirror/search@6.5.0
| | | +-- @codemirror/state@6.2.1 deduped
| | | +-- @codemirror/view@6.13.0 deduped
| | | `-- crelt@1.0.6 deduped
| | +-- @codemirror/state@6.2.1 deduped
| | `-- @codemirror/view@6.13.0 deduped
| `-- dompurify@3.0.5
+-- @rollup/plugin-node-resolve@15.1.0
| +-- @rollup/pluginutils@5.0.2
| | +-- @types/estree@1.0.1
| | +-- estree-walker@2.0.2
| | +-- picomatch@2.3.1
| | `-- rollup@3.26.3 deduped
| +-- @types/resolve@1.20.2
| +-- deepmerge@4.3.1
| +-- is-builtin-module@3.2.1
| | `-- builtin-modules@3.3.0
| +-- is-module@1.0.0
| +-- resolve@1.22.2
| | +-- is-core-module@2.12.1
| | | `-- has@1.0.3
| | |   `-- function-bind@1.1.1
| | +-- path-parse@1.0.7
| | `-- supports-preserve-symlinks-flag@1.0.0
| `-- rollup@3.26.3 deduped
+-- concurrently@8.2.0
| +-- chalk@4.1.2
| | +-- ansi-styles@4.3.0
| | | `-- color-convert@2.0.1
| | |   `-- color-name@1.1.4
| | `-- supports-color@7.2.0
| |   `-- has-flag@4.0.0 deduped
| +-- date-fns@2.30.0
| | `-- @babel/runtime@7.22.6
| |   `-- regenerator-runtime@0.13.11
| +-- lodash@4.17.21
| +-- rxjs@7.8.1
| | `-- tslib@2.6.1
| +-- shell-quote@1.8.1
| +-- spawn-command@0.0.2
| +-- supports-color@8.1.1
| | `-- has-flag@4.0.0
| +-- tree-kill@1.2.2
| `-- yargs@17.7.2
|   +-- cliui@8.0.1
|   | +-- string-width@4.2.3 deduped
|   | +-- strip-ansi@6.0.1
|   | | `-- ansi-regex@5.0.1
|   | `-- wrap-ansi@7.0.0
|   |   +-- ansi-styles@4.3.0 deduped
|   |   +-- string-width@4.2.3 deduped
|   |   `-- strip-ansi@6.0.1 deduped
|   +-- escalade@3.1.1
|   +-- get-caller-file@2.0.5
|   +-- require-directory@2.1.1
|   +-- string-width@4.2.3
|   | +-- emoji-regex@8.0.0
|   | +-- is-fullwidth-code-point@3.0.0
|   | `-- strip-ansi@6.0.1 deduped
|   +-- y18n@5.0.8
|   `-- yargs-parser@21.1.1
+-- http-server@14.1.1
| +-- basic-auth@2.0.1
| | `-- safe-buffer@5.1.2
| +-- chalk@4.1.2 deduped
| +-- corser@2.0.1
| +-- he@1.2.0
| +-- html-encoding-sniffer@3.0.0
| | `-- whatwg-encoding@2.0.0
| |   `-- iconv-lite@0.6.3
| |     `-- safer-buffer@2.1.2
| +-- http-proxy@1.18.1
| | +-- eventemitter3@4.0.7
| | +-- follow-redirects@1.15.2
| | `-- requires-port@1.0.0
| +-- mime@1.6.0
| +-- minimist@1.2.8
| +-- opener@1.5.2
| +-- portfinder@1.0.32
| | +-- async@2.6.4
| | | `-- lodash@4.17.21 deduped
| | +-- debug@3.2.7
| | | `-- ms@2.1.3
| | `-- mkdirp@0.5.6
| |   `-- minimist@1.2.8 deduped
| +-- secure-compare@3.0.1
| +-- union@0.5.0
| | `-- qs@6.11.2
| |   `-- side-channel@1.0.4
| |     +-- call-bind@1.0.2
| |     | +-- function-bind@1.1.1 deduped
| |     | `-- get-intrinsic@1.2.1 deduped
| |     +-- get-intrinsic@1.2.1
| |     | +-- function-bind@1.1.1 deduped
| |     | +-- has-proto@1.0.1
| |     | +-- has-symbols@1.0.3
| |     | `-- has@1.0.3 deduped
| |     `-- object-inspect@1.12.3
| `-- url-join@4.0.1
`-- rollup@3.26.3
  `-- UNMET OPTIONAL DEPENDENCY fsevents@~2.3.2

Awesome! Indeed due to some previous experiments I had @codemirror/basic-setup@0.20.0 in package.json, after removing it and cleaning modules, it’s working:

image

Thanks!

You are using 0.x versions. Don’t—those have long been superseded by 6.x versions. If you’re using a package that only has 0.x versions, that has been merged into another package. Search the changelog to find out which.

1 Like