文章/答案/技术大牛

发布

社区首页 >问答首页 >错误[ERR_UNSUPPORTED_ESM_URL_SCHEME]：默认的ESM加载程序- Vue 3只支持文件和数据URL

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

Stack Overflow用户

提问于 2021-10-21 16:42:34

回答 8查看 40.6K关注 0票数 27

当我要启动vue 3类型记录项目时，会出现以下错误：

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

javascript

node.js

typescript

vue.js

babel-loader

回答 8

Stack Overflow用户

回答已采纳

发布于 2021-12-09 19:35:46

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

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

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

另一个解决方案可能是将整个程序移到package.json中，在@James的评论中对此有更多的了解(但我没有测试它)。

票数 4

Stack Overflow用户

发布于 2021-12-06 02:59:24

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

票数 42

Stack Overflow用户

发布于 2021-12-31 10:46:37

这是因为是节点(本地)的较低版本。如果将节点升级到最新版本，问题将不再存在。较低版本的节点与最新版本的webpack不兼容。

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

这个解决方案不仅适用于vue，也适用于所有javascript框架，包括Angular和React。这与最新的webpack有关。因此，如果您使用最新的webpack与javascript代码或typescript代码和较低版本的节点，问题就会发生。

为了清晰起见，我转到了node - v12.18.3，并尝试用简单的webpack configularion编译一个文本代码。以下是错误：

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)，我就能够成功地编译它。

票数 18

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69665780

复制

相似问题

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问错误[ERR_UNSUPPORTED_ESM_URL_SCHEME]：默认的ESM加载程序- Vue 3只支持文件和数据URLEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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