The issue is because of the lower version of node (local). If you upgrade your node to the latest version, the issue will be no more. The lower version of node is not compatible with latest 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.

And this solution is not only for vue, It's for all the javascript frameworks including Angular and React. This is related to latest webpack. So if you're using latest webpack with javascript code or typescript code and lower version of node, the problem will occur.

For the clarity, I've switched to node - v12.18.3 and try to compile a tyescript code with simple webpack configularion. Below is the error:

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)

Once I switch back the node version to higher one (say node - v16.13.1), I'm able to compile it successfully.

I had this issue a couple of days ago. I just upgraded node.js to version 16.13.1 and problem solved.

That actually is a bug.

See, they 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, but path.resolve() only returns an absolute path (not a URL), which on Windows environment usually starts with the name of the local disk (e.g., C:).

I have found a possible workaround!

As @Dima Parzhitsky points out, this seems to be a bug in Vue. The part of Vue containing that bug is the loader for the vue.config.js (or .mjs/.cjs) configuration file. Vue actually provides another option though, you can move the configuration to a "vue":{ ... } block inside of package.json.

As per the Vue Docs, this will limit you to only json-compatible values though and since your config uses functions, this might not be an option for you (unless you can find a way of achieving the same result in a json-compatible way)

For those viewing this who do have json-compatible values though, here's an example from my own project so you know what it should sort-of look like:

original vue.config.js (make sure to delete this file):

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";`
      }
    }
  }
}; 

moved inside 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';"
        }
      }
    }
  }

My problem is because my Node.js version is too low. Upgrade to Node.js 16 solved the problem.

The whole thing seems to be a bug with the current vue cli configuration and node.js version. For more info check out the comment from @Dima Parzhitsky and @Zhang Buzz.

The best workaround for me was to simply use the @vue/cli@5.0.0-beta.7 in combination with node v16.12.0.

Also i use a vue.config.mjs instead of vue.config.js

Another solution could be to move the whole thing into the package.json, more about this in the comment of @James Batchelor (but i didn't test it)

I had a similar issue but with pm2 node process manager. I am trying to run a nodejs app in cluster mode, but it always ends in the same error code [ERR_UNSUPPORTED_ESM_URL_SCHEME]. This post is the top google result when searching for my issue, so leaving my method of solving it might be helpful to someone.

The solution is to install Windows Subsystem for Linux (WSL)

This allows you to run nodejs in Linux, where the above error can be avoided since the URL scheme would be accepted there. Notice the error message: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'