Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader - Vue 3

Question

I get the following error when i want to start my vue 3 typescript project:

 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)

This error occurs since I renamed my vue.config.js to vue.config.mjs. The funny thing is that this project works via gitpod.io but not in phpstorm and vscode.

My 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

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

Answer 2

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.

Answer 3

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:).

Answer 4

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)

Answer 5

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

Answer 6

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

Answer 7

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:'

Answer 8

After updating node by using nvm, make sure you also update the version of node that pm2 is running, by the following command:

pm2 reload app --update-env:

pm2 show app will show you which Node version pm2 is using.

Answer 9

Clean cache yarn cache clean && rm -rf node_modules