错误 [ERR_UNSUPPORTED_ESM_URL_SCHEME]：默认 ESM 加载程序 - Vue 3 仅支持文件和数据 URL
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader - Vue 3
当我想启动我的 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();
},
};
这实际上是一个错误。
看，他们 use import() function on a string, that is the result of path.resolve() call. As you have already noticed, the import() function only works with file:// and data:// URLs，但 path.resolve() 只有 returns 绝对路径（不是 URL），在 Windows 环境中通常以本地磁盘的名称（例如，C:）。
我找到了可行的解决方法！
正如@Dima Parzhitsky 指出的那样，这似乎是 Vue 中的一个错误。包含该错误的 Vue 部分是 vue.config.js（或 .mjs/.cjs）配置文件的加载程序。 Vue 实际上提供了另一种选择，您可以将配置移动到 package.json.
内的 "vue":{ ... } 块中
As per the Vue Docs，这将限制你只能使用 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';"
}
}
}
}
我的问题是因为我的Node.js版本太低了。升级到 Node.js 16 解决了问题。
整个事情似乎是当前 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 的评论（但我没有测试）
我遇到了类似的问题，但使用的是 pm2 节点进程管理器。我正在尝试 运行 集群模式下的 nodejs 应用程序，但它总是以相同的错误代码 [ERR_UNSUPPORTED_ESM_URL_SCHEME] 结束。这个 post 是搜索我的问题时排名前 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:'
我几天前遇到过这个问题。我刚刚将 node.js 升级到版本 16.13.1，问题已解决。
问题是因为node版本较低（本地）。如果您将您的节点升级到最新版本，问题将不再存在。低版本的node不兼容最新的webpack
I have installed node through nvm(node version manager). So that I can use multiple versions of node. I too face the same issue when I use node - v12.18.3. If I use node - v16.13.1, problem is fixed.
并且此解决方案不仅适用于 vue，适用于所有 javascript 框架，包括 Angular 和 React。这与最新的 webpack 有关。所以如果你使用最新的 webpack 和 javascript 代码或 typescript 代码和较低版本的节点，就会出现问题。
为清楚起见，我已切换到 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），我就能够成功编译它。
当我想启动我的 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();
},
};
这实际上是一个错误。
看，他们 use import() function on a string, that is the result of path.resolve() call. As you have already noticed, the import() function only works with file:// and data:// URLs，但 path.resolve() 只有 returns 绝对路径（不是 URL），在 Windows 环境中通常以本地磁盘的名称（例如，C:）。
我找到了可行的解决方法！
正如@Dima Parzhitsky 指出的那样，这似乎是 Vue 中的一个错误。包含该错误的 Vue 部分是 vue.config.js（或 .mjs/.cjs）配置文件的加载程序。 Vue 实际上提供了另一种选择，您可以将配置移动到 package.json.
"vue":{ ... } 块中
As per the Vue Docs，这将限制你只能使用 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';"
}
}
}
}
我的问题是因为我的Node.js版本太低了。升级到 Node.js 16 解决了问题。
整个事情似乎是当前 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 的评论（但我没有测试）
我遇到了类似的问题，但使用的是 pm2 节点进程管理器。我正在尝试 运行 集群模式下的 nodejs 应用程序，但它总是以相同的错误代码 [ERR_UNSUPPORTED_ESM_URL_SCHEME] 结束。这个 post 是搜索我的问题时排名前 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:'
我几天前遇到过这个问题。我刚刚将 node.js 升级到版本 16.13.1，问题已解决。
问题是因为node版本较低（本地）。如果您将您的节点升级到最新版本，问题将不再存在。低版本的node不兼容最新的webpack
I have installed node through nvm(node version manager). So that I can use multiple versions of node. I too face the same issue when I use
node - v12.18.3. If I usenode - v16.13.1, problem is fixed.
并且此解决方案不仅适用于 vue，适用于所有 javascript 框架，包括 Angular 和 React。这与最新的 webpack 有关。所以如果你使用最新的 webpack 和 javascript 代码或 typescript 代码和较低版本的节点，就会出现问题。
为清楚起见，我已切换到 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），我就能够成功编译它。