錯誤 [ERR_UNSUPPORTED_ESM_URL_SCHEME]：默認 ESM 加載程序 - Vue 3 僅支持文件和數據 URL

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

那實際上是一個錯誤。

看，他們在字符串上使用import()函數，這是path.resolve()調用的結果。 正如您已經注意到的， import()函數僅適用於file://和data:// URLs ，但path.resolve()只返回絕對路徑（不是 URL），在 Windows 環境中通常以本地磁盤的名稱（例如， C: ）。

Answer 2

我找到了一個可能的解決方法！

正如@Dima Parzhitsky 指出的那樣，這似乎是 Vue 中的一個錯誤。 包含該錯誤的 Vue 部分是vue.config.js （或.mjs / .cjs ）配置文件的加載器。 Vue 實際上提供了另一種選擇，您可以將配置移動到package.json的"vue":{ ... }塊。

根據 Vue Docs ，這將限制您只能使用與 json 兼容的值，並且由於您的配置使用函數，因此這可能不是您的選擇（除非您可以找到一種以與 json 兼容的方式實現相同結果的方法） )

對於那些確實有 json-compatible 值的人來說，這是我自己項目中的一個例子，所以你知道它應該是什么樣的：

原來的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 3

我的問題是因為我的 Node.js 版本太低。 升級到 Node.js 16 解決了這個問題。

Answer 4

整個事情似乎是當前 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 的評論（但我沒有測試）

Answer 5

我有一個類似的問題，但使用 pm2 節點進程管理器。 我試圖在集群模式下運行 nodejs 應用程序，但它總是以相同的錯誤代碼[ERR_UNSUPPORTED_ESM_URL_SCHEME] 。 這篇文章是搜索我的問題時在 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:' 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 6

幾天前我遇到了這個問題。 我剛剛將 node.js 升級到16.13.1版本，問題解決了。

Answer 7

問題是因為節點（本地）版本較低。 如果您將節點升級到最新版本，問題將不再存在。

我已經通過 nvm（節點版本管理器）安裝了節點。 這樣我就可以使用多個版本的節點。 當我使用node - v12.18.3時，我也面臨同樣的問題。 如果我使用node - v16.13.1 ，問題就解決了。

Answer 8

使用 nvm 更新節點后，請確保您還通過以下命令更新了 pm2 正在運行的節點版本：

pm2 reload app --update-env ：

pm2 show app將顯示 pm2 正在使用的 Node 版本。

Answer 9

清理緩存yarn cache clean && rm -rf node_modules