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

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();
  },
};

Answer 1

那实际上是一个错误。

看，他们在字符串上使用import()函数，这是path.resolve()调用的结果。 正如您已经注意到的， import()函数仅适用于file://和data:// URLs ，但path.resolve()只返回绝对路径（不是 URL），在 Windows 环境中通常以本地磁盘的名称（例如， C: ）。

Answer 2

我找到了一个可能的解决方法！

正如@Dima Parzhitsky 指出的那样，这似乎是 Vue 中的一个错误。 包含该错误的 Vue 部分是vue.config.js （或.mjs / .cjs ）配置文件的加载器。 Vue 实际上提供了另一种选择，您可以将配置移动到package.json的"vue":{ ... }块。

根据 Vue Docs ，这将限制您只能使用与 json 兼容的值，并且由于您的配置使用函数，因此这可能不是您的选择（除非您可以找到一种以与 json 兼容的方式实现相同结果的方法） )

对于那些确实有 json-compatible 值的人来说，这是我自己项目中的一个例子，所以你知道它应该是什么样的：

原来的vue.config.js （一定要删除这个文件）：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/background.js',
      rendererProcessFile: 'src/renderer/main.js',
      externals:['node-pty'],
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/renderer/assets/globals.scss";`
      }
    }
  }
}; 

在package.json移动：

"vue": {
    "pluginOptions": {
      "electronBuilder": {
        "mainProcessFile": "src/main/background.js",
        "rendererProcessFile": "src/renderer/main.js",
        "externals":["node-pty"]
      }
    },
    "css": {
      "loaderOptions": {
        "sass": {
          "additionalData": "@import '@/renderer/assets/globals.scss';"
        }
      }
    }
  }

Answer 3

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

Answer 4

整个事情似乎是当前 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 的评论（但我没有测试）

Answer 5

我有一个类似的问题，但使用 pm2 节点进程管理器。 我试图在集群模式下运行 nodejs 应用程序，但它总是以相同的错误代码[ERR_UNSUPPORTED_ESM_URL_SCHEME] 。 这篇文章是搜索我的问题时在 google 上的最佳结果，所以留下我的解决方法可能对某人有所帮助。

解决方案是安装Windows Subsystem for Linux (WSL)

这允许您在 Linux 中运行 nodejs，在那里可以避免上述错误，因为 URL 方案将在那里被接受。 请注意错误消息： Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

Answer 6

几天前我遇到了这个问题。 我刚刚将 node.js 升级到16.13.1版本，问题解决了。

Answer 7

问题是因为节点（本地）版本较低。 如果您将节点升级到最新版本，问题将不再存在。

我已经通过 nvm（节点版本管理器）安装了节点。 这样我就可以使用多个版本的节点。 当我使用node - v12.18.3时，我也面临同样的问题。 如果我使用node - v16.13.1 ，问题就解决了。

Answer 8

使用 nvm 更新节点后，请确保您还通过以下命令更新了 pm2 正在运行的节点版本：

pm2 reload app --update-env ：

pm2 show app将显示 pm2 正在使用的 Node 版本。

Answer 9

清理缓存yarn cache clean && rm -rf node_modules