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

Answer 1

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

Answer 2

该问题是由于 node 版本较低（本地）造成的。如果您将节点升级到最新版本，问题将不再存在。低版本的node不兼容最新的webpack。

我已经通过nvm（节点版本管理器）安装了节点。这样我就可以使用多个版本的节点。当我使用

node - v12.18.3

时，我也面临同样的问题。如果我使用

node - v16.13.1

，问题就解决了。

这个解决方案不仅适用于

vue

，它适用于所有的javascript框架，包括

Angular

和

React

。这与最新的

webpack

有关。因此，如果您使用带有

javascript

代码或

typescript

代码和较低版本的节点的最新 webpack，则会出现问题。

为了清楚起见，我已切换到

node - v12.18.3

并尝试使用简单的 webpack 配置编译 tyescript 代码。以下是错误：

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

> [email protected] 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 - v16.13.1

），我就可以成功编译它。

Answer 3

这实际上是一个错误。

看，他们在字符串上使用

import()

函数，这是

path.resolve()

调用的结果。正如您已经注意到的，

import()

函数仅适用于

file://

和

data://

URL，但

path.resolve()

仅返回绝对路径（而不是URL），在Windows环境中通常以名称开头本地磁盘（例如，

C:

）。

Answer 4

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

对我来说最好的解决方法是简单地将

@vue/[email protected]

与节点

v16.12.0

结合使用。

我还用

vue.config.mjs

代替

vue.config.js

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

Answer 5

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

正如 @Dima Parzhitsky 指出的，这似乎是 Vue 中的一个错误。 Vue 中包含该错误的部分是

vue.config.js

（或

.mjs

/

.cjs

）配置文件的加载器。 Vue 实际上提供了另一种选择，您可以将配置移动到

"vue":{ ... }

内的

package.json

块。

根据 Vue 文档，这将限制您只能使用 json 兼容的值，并且由于您的配置使用函数，这可能不适合您（除非您可以找到一种在 json 中实现相同结果的方法） -兼容方式）

对于那些 do 拥有 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';"
        }
      }
    }
  }

Answer 6

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

Answer 7

我也遇到了类似的问题，但是使用 pm2 节点进程管理器。我正在尝试在集群模式下运行 Nodejs 应用程序，但它总是以相同的错误代码结束

[ERR_UNSUPPORTED_ESM_URL_SCHEME]

。这篇文章是搜索我的问题时的最佳谷歌结果，因此留下我的解决方法可能会对某人有所帮助。

解决方案是安装 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:'

Answer 8

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

pm2 reload app --update-env

：

pm2 show app

 将显示 pm2 正在使用哪个 Node 版本。

Answer 9

清理缓存

yarn cache clean && rm -rf node_modules

Answer 10

就我而言，更新纱线就是解决方案

yarn set version stable