javascripthtmlnode.jstoast-ui-editor

"type": "module" set in package.json but still get the "set "type": "module" in the package.json or use the .mjs extension." error

I'm trying to get a TOAST UI app working without success. I've followed the instruction here. When I 'npm start' I am getting this error 'Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.'

I have set the "type": "module" in the package.json file and in the src tag of the html component and renamed the my app.js to app.mjs without success.

Not sure what I'm missing?! Thanks!

package.json looks like this:

{
  "type": "module",
  "name": "my-toastie",
  "version": "1.0.0",
  "description": "",
  "main": "app.mjs",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.mjs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@toast-ui/editor": "^3.2.2"
  }
}

app.mjs looks like this:

import Editor from "@toast-ui/editor";
//import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style

const editor = new Editor({
  el: document.querySelector("#editor"),
  height: "600px",
  initialEditType: "markdown",
  previewStyle: "vertical",
});

index.html looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World Example</title>
  </head>
  <body>
    <div id="editor"></div>

    <script type="module" src="app.mjs"></script>
  </body>
</html>

The exact error I get when I run npm start is:

my-toastie@1.0.0 start node app.mjs

(node:50800) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Use node --trace-warnings ... to show where the warning was created) /Users/xxxxx/Documents/personal projects/my-toastie/node_modules/@toast-ui/editor/dist/esm/index.js:8 import { Fragment, Schema, Slice, NodeRange, Mark as Mark$1, DOMParser, Node as Node$3 } from 'prosemirror-model'; ^^^^^^

SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) at wrapSafe (node:internal/modules/cjs/loader:1176:20) at Module._compile (node:internal/modules/cjs/loader:1218:27) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at ModuleWrap. (node:internal/modules/esm/translators:169:29) at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Solution

  • Turns out I was mixing up client and server side libraries. I got it working with this client side code:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my toastie</title>
    <!-- Editor's Style -->
    <link
      rel="stylesheet"
      href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css"
    />
  </head>
  <body>
    <div id="editor"></div>
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
    <script>
      const Editor = toastui.Editor;
    </script>
    <script>
      const editor = new Editor({
        el: document.querySelector("#editor"),
        height: "600px",
        initialEditType: "markdown",
        previewStyle: "vertical",
      });
    </script>
  </body>
</html>