纯JS用script标签引入Wysimark编辑器报错，求问题排查

错误原因 #

你遇到的错误是因为@wysimark/standalone的浏览器构建采用CommonJS（CJS）格式，而你使用了ES模块的命名导入语法，但该模块的导出是默认导出而非命名导出，同时CJS模块在ES模块环境下的导入规则需要调整。

解决方案 #

方案1：修正ES模块导入语法 #

修改index.js中的导入语句，改用默认导入：

import createWysimark from "@wysimark/standalone"

const container = document.getElementById("editor-container")
const wysimark = createWysimark(container, {
  initialMarkdown: "# Hello World",
})

方案2：纯<script>标签直接引入（更符合你的需求） #

如果不需要ES模块，直接用UMD构建文件引入更简单：

1. 在index.html中直接引入UMD格式的构建文件：

<html>
    <body>
        <div id="editor-container"></div>
        <!-- 引入Wysimark的UMD构建 -->
        <script src="./node_modules/@wysimark/standalone/.dist/browser/index.umd.js"></script>
        <!-- 初始化编辑器 -->
        <script>
            const container = document.getElementById("editor-container")
            const wysimark = window.createWysimark(container, {
                initialMarkdown: "# Hello World",
            })
        </script>
    </body>
</html>

这种方式不需要额外的index.js模块文件，直接在浏览器环境中通过全局变量window.createWysimark调用初始化方法。

内容的提问来源于stack exchange，提问作者FreeStyler