错误[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

---

我也遇到了这个问题，即使使用 vue-cli 5.0.0-rc.1 也是如此。 - V. Rubinetti

一切在Vue CLI 5（beta版）中都已经为我固定了。更多信息请查看@James Batchelor的回答下面。 - Jannik Buscha

非常奇怪，5.0.0-rc.1或5.0.0-beta.2都无法正常运行，即使我进行了新的(yarn cache clean && rm -rf node_modules yarn.lock)安装。您能否告诉我您使用的操作系统版本、IDE/Shell等信息呢？ - V. Rubinetti

这是我的Vue信息和全局安装的软件包：https://i.imgur.com/ZIjoeYT.png - Jannik Buscha

@V.Rubinetti，你解决了这个问题吗？对于我来说，5.0.0-rc.1 + node 16.13.0仍然无法工作。 - Yue JIN

只需更新到5.0.8版本。 - Noel Schenk

Answer 1

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

- Zhang Buzz

Answer 2

问题源于本地的Node版本过低。如果将Node升级到最新版本，问题将不复存在。较低版本的Node与最新版的Webpack不兼容。

引用： 我通过nvm（node版本管理器）安装了Node。这样我就可以使用多个版本的Node。当我使用 `node -v12.18.3` 时也遇到了同样的问题。如果我使用 `node -v16.13.1`，问题就解决了。

此解决方案不仅适用于Vue，而且适用于所有JavaScript框架，包括Angular和React。这与最新的webpack有关。因此，如果您正在使用带有JavaScript代码或TypeScript代码以及较低版本的Node的最新版本的Webpack，则会出现问题。

为了更明确，我已经切换到 `node -v12.18.3` 并尝试使用简单的webpack配置编译typescript代码。以下是错误：

actionanand@RnDlab:/mnt/d/AR/rnd/myJs/sample_ts_code$ npm run serve

> sample_ts_code@1.0.0 serve /mnt/d/AR/rnd/myJs/sample_ts_code
> webpack serve --mode=development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8082/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.8.107:8082/
<i> [webpack-dev-server] Content not from webpack is served from '/mnt/d/AR/rnd/myJs/index/public' directory
(node:1538) ExperimentalWarning: The ESM module loader is experimental.
<e> [webpack-dev-middleware] HookWebpackError: Only file and data URLs are supported by the default ESM loader
<e>     at makeWebpackError (/mnt/d/AR/rnd/myJs/index/node_modules/webpack/lib/HookWebpackError.js:48:9)
<e>     at /mnt/d/AR/rnd/myJs/index/node_modules/webpack/lib/Compilation.js:3055:12
<e>     at eval (eval at create (/mnt/d/AR/rnd/myJs/index/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:50:1)
<e>     at /mnt/d/AR/rnd/myJs/index/node_modules/webpack/lib/Compilation.js:508:26
<e>     at /mnt/d/AR/rnd/myJs/index/node_modules/copy-webpack-plugin/dist/index.js:705:13
<e> -- inner error --
<e> Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
<e>     at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
<e>     at Loader.resolve (internal/modules/esm/loader.js:97:40)
<e>     at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
<e>     at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
<e>     at link (internal/modules/esm/module_job.js:46:36)
<e> caused by plugins in Compilation.hooks.processAssets
<e> Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader
<e>     at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:698:11)
<e>     at Loader.resolve (internal/modules/esm/loader.js:97:40)
<e>     at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
<e>     at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:47:40)
<e>     at link (internal/modules/esm/module_job.js:46:36)

一旦我将 node 版本切换回较高的版本（比如 node -v16.13.1），我就能够成功编译它。

- Anand Raja

Answer 3

那实际上是一个bug。

你可以看到，他们在一个字符串上使用import()函数，这个字符串是path.resolve()调用的结果。正如你已经注意到的，import()函数只能处理file://和data://类型的URL，但是path.resolve()只返回绝对路径（而不是URL），在Windows环境中通常以本地磁盘名称开头（如C:）。

- Parzh from Ukraine

---

在Vue CLI 5（beta）中，一切都已经为我固定了。更多信息请查看@James Batchelor的回答下面。 - Jannik Buscha

在 https://github.com/vuejs/vue-cli/issues/6592 和 https://github.com/vuejs/vue-cli/issues/6667 中有记录。 - V. Rubinetti

他们会修复吗？这只发生在Windows上吗？ - shtse8

Answer 4

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

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

另外，我使用vue.config.mjs而不是vue.config.js。

另一个解决方案可能是将整个内容移动到package.json中，有关更多信息，请参阅@James Batchelor的评论（但我没有测试过）。

- Jannik Buscha

Answer 5

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

正如 @Dima Parzhitsky 指出的那样，这似乎是Vue中的一个bug。Vue中包含该bug的部分是vue.config.js(或.mjs/.cjs)配置文件的加载程序。然而，Vue实际上还提供了另一种选择，你可以将配置移到package.json内的"vue":{ ... }块中。

根据 Vue 文档，这将限制你只能使用与json兼容的值，而且由于你的配置使用了函数，这对你来说可能不是一个选项（除非你能找到一种以json兼容方式实现相同结果的方法）

对于那些具有json兼容值的人，以下是我的项目示例，这样你就知道它应该是什么样子：

原始的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';"
        }
      }
    }
  }

- James Batchelor

---

这个 bug 在 vue cli 5 (beta) 中似乎已经被修复了，至少对我来说是这样的。更多信息请参见： https://github.com/mdx-js/mdx/issues/1718根据我的经验，它必须按照 vue.config.mjs 进行工作。 - Jannik Buscha

Answer 6

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

- Federico Julián Ferrelli Mazza

Answer 7

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

pm2 reload app --update-env：

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

- David

Answer 8

我曾经遇到过类似的问题，但是它与pm2 node进程管理器有关。 我试图在集群模式下运行一个nodejs应用程序，但它总是以相同的错误代码[ERR_UNSUPPORTED_ESM_URL_SCHEME]结束。 在搜索我的问题时，这篇文章是谷歌的首要结果，所以留下我解决问题的方法可能对某些人有帮助。

解决方案是安装 Windows子系统Linux（WSL）。

这允许您在Linux中运行nodejs，在那里可以避免上述错误，因为URL方案将在那里被接受。请注意错误消息：仅默认ESM加载器支持文件和数据URL。在Windows上，绝对路径必须是有效的file:// URLs。收到协议'c：'

- ContraHacker

Answer 9

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

- Idan

Answer 10

在我的情况下，更新yarn是解决办法。

yarn set version stable

- Ed_