错误 \[ERR_UNSUPPORTED_ESM_URL_SCHEME\]：默认 ESM 加载器仅支持文件和数据 URL - Vue 3

Question

当我想启动我的 vue 3 typescript 项目时出现以下错误：

  ERROR  Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
 Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
at new NodeError (node:internal/errors:371:5)
at defaultResolve (node:internal/modules/esm/resolve:1016:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
at ESMLoader.import (node:internal/modules/esm/loader:276:22)
at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
at importModuleDynamically (node:vm:381:46)
at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
at loadFileConfig (C:\Projects\backify-ui\documentation\node_modules\@vue\cli-service\lib\util\loadFileConfig.js:28:7)

由于我将 vue.config.js 重命名为 vue.config.mjs ，因此出现此错误。有趣的是，这个项目通过 gitpod.io 工作，但不能在 phpstorm 和 vscode 中工作。

我的 vue.config.mjs：

 import rehypeHighlight from "rehype-highlight";

export default {
  chainWebpack: (config) => {
    config.module
      .rule("mdx")
      .test(/\.mdx?$/)
      .use("babel-loader")
      .loader("babel-loader")
      .options({ plugins: ["@vue/babel-plugin-jsx"] /* Other options… */ })
      .end()
      .use("@mdx-js/loader")
      .loader("@mdx-js/loader")
      .options({
        jsx: true,
        rehypePlugins: [rehypeHighlight] /* otherOptions… */,
      })
      .end();
  },
};

原文由 Jannik Buscha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

整个事情似乎是当前 vue cli 配置和 node.js 版本的错误。有关更多信息，请查看 @Dima Parzhitsky 和 @Zhang Buzz 的评论。

对我来说最好的解决方法是简单地将 @vue/cli@5.0.0-beta.7 与节点 v16.12.0 结合使用。

我也使用 vue.config.mjs 而不是 vue.config.js

另一个解决方案可能是将整个东西移到 package.json 中，在@James Batchelor 的评论中有更多关于这一点的信息（但我没有测试它）

原文由 Jannik Buscha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我的问题是因为我的 Node.js 版本太低。升级到 Node.js 16 解决了这个问题。

原文由 Zhang Buzz 发布，翻译遵循 CC BY-SA 4.0 许可协议