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

Question

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

\n

 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:'\n 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:'\nat new NodeError (node:internal/errors:371:5)\nat defaultResolve (node:internal/modules/esm/resolve:1016:11)\nat ESMLoader.resolve (node:internal/modules/esm/loader:422:30)\nat ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)\nat ESMLoader.import (node:internal/modules/esm/loader:276:22)\nat importModuleDynamically (node:internal/modules/cjs/loader:1041:29)\nat importModuleDynamicallyWrapper (node:internal/vm/module:437:21)\nat importModuleDynamically (node:vm:381:46)\nat importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)\nat loadFileConfig (C:\\Projects\\backify-ui\\documentation\\node_modules\\@vue\\cli-service\\lib\\util\\loadFileConfig.js:28:7)\n

\n

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

\n

我的 vue.config.mjs：

\n

import rehypeHighlight from "rehype-highlight";\n\nexport default {\n  chainWebpack: (config) => {\n    config.module\n      .rule("mdx")\n      .test(/\\.mdx?$/)\n      .use("babel-loader")\n      .loader("babel-loader")\n      .options({ plugins: ["@vue/babel-plugin-jsx"] /* Other options\xe2\x80\xa6 */ })\n      .end()\n      .use("@mdx-js/loader")\n      .loader("@mdx-js/loader")\n      .options({\n        jsx: true,\n        rehypePlugins: [rehypeHighlight] /* otherOptions\xe2\x80\xa6 */,\n      })\n      .end();\n  },\n};\n

\n

Answer 1

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

Answer 2

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

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

而且这个解决方案不仅适用于，它适用于包括和vue在内的所有 javascript 框架。这与最新的有关。所以如果你使用的是最新的带有代码的webpack或者代码和较低版本的node，就会出现这个问题。AngularReactwebpackjavascripttypescript

为了清楚起见，我已经切换到node - v12.18.3并尝试使用简单的 webpack 配置来编译 tyescript 代码。下面是错误：

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 - 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/cli@5.0.0-beta.7与 node 结合使用v16.12.0。

我也用 avue.config.mjs代替vue.config.js

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