Import basic modules

1

Hi. I’m very new to CodeMirror and trying my first project, following the basic instructions using

import {EditorState} from "@codemirror/state"
import {EditorView, keymap} from "@codemirror/view"
import {defaultKeymap} from "@codemirror/commands"

I get the following firefox 118 browser messages:
Could not load module because of wrong MIME-type (“text/html”)

2

Do you use a bundler like webpack, rollup, vite or something similar, or are you trying to open the script right in a browser? Do you use node?

Can you share more of your code?

3

Hi Danon, I have installed the latest version of node and got the CM sources via github - dev - Download ZIP, but have not used a bundler yet.

Currently I try a single html file for testing purposes:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./styles/dummy.css">
    <style type="text/css"></style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="PM_logo.ico" type="image/x-icon">
    <script type=module>

    import {EditorState} from "./script/external/codeMirror/state"
    import {EditorView, keymap} from "./script/external/codeMirror/view"
    import {defaultKeymap} from "./script/external/codeMirror/commands"

    </script>
    <title> Title </title>
  </head>
  <body>
  Reason: CORS request not HTTP
  
  </body>
</html>

It seems, there is a problem loading these local files by import

4

The CodeMirror scripts internally also use "@codemirror/state"-style imports, so the browser cannot load them without you using one of A) a bundler, B) an import map, or C) some kind of rewriting server that changes these imports into relative paths.

5

OK. I will try Rollup as described on the page examples. Thanks.