Recibo el siguiente error cuando quiero iniciar mi proyecto mecanografiado 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) Este error ocurre desde que cambié el nombre de mi vue.config.js a vue.config.mjs . Lo curioso es que este proyecto funciona a través de gitpod.io pero no en phpstorm y vscode.
Mi 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(); }, };El problema se debe a la versión inferior del nodo (local). Si actualiza su nodo a la última versión, el problema desaparecerá. La versión inferior del nodo no es compatible con el paquete web más reciente.
He instalado el nodo a través de nvm (administrador de versiones del nodo). Para poder usar múltiples versiones de node. Yo también enfrento el mismo problema cuando uso
node - v12.18.3. Si usonode - v16.13.1, el problema está solucionado.
Y esta solución no es solo para vue , es para todos los marcos de JavaScript, incluidos Angular y React . Esto está relacionado con el último webpack . Entonces, si está utilizando el paquete web más reciente con código javascript o código typescript y una versión inferior del nodo, se producirá el problema.
Para mayor claridad, cambié al node - v12.18.3 e intenté compilar un código tyescript con una configuración simple de paquete web. A continuación se muestra el 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) Una vez que vuelvo a cambiar la versión del nodo a una superior (por ejemplo node - v16.13.1 ), puedo compilarlo correctamente.
Eso en realidad es un error.
Mira, usan la función import() en una cadena, que es el resultado de la llamada path.resolve() . Como ya habrá notado, la función import() solo funciona con las URL file:// y data:// , pero path.resolve() solo devuelve una ruta absoluta (no una URL), que en el entorno de Windows generalmente comienza con el nombre del disco local (p. ej., C: ).
¡He encontrado una posible solución!
Como señala @Dima Parzhitsky, esto parece ser un error en Vue. La parte de Vue que contiene ese error es el cargador del archivo de configuración vue.config.js (o .mjs / .cjs ). Sin embargo, Vue en realidad ofrece otra opción, puede mover la configuración a un bloque "vue":{ ... } dentro de package.json .
Sin embargo, según Vue Docs , esto lo limitará solo a valores compatibles con json y dado que su configuración usa funciones, esta podría no ser una opción para usted (a menos que pueda encontrar una manera de lograr el mismo resultado de una manera compatible con json) )
Sin embargo, para aquellos que ven esto y tienen valores compatibles con json, aquí hay un ejemplo de mi propio proyecto para que sepan cómo debería verse:
vue.config.js original (asegúrese de eliminar este archivo):
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";` } } } }; movido dentro 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';" } } } }Mi problema es que mi versión de Node.js es demasiado baja. Actualizar a Node.js 16 resolvió el problema.
Todo parece ser un error con la configuración actual de vue cli y la versión de node.js. Para obtener más información, consulte el comentario de @Dima Parzhitsky y @Zhang Buzz.
La mejor solución para mí fue simplemente usar @vue/cli@5.0.0-beta.7 en combinación con el nodo v16.12.0 .
También uso un vue.config.mjs en lugar de vue.config.js
Otra solución podría ser mover todo al paquete.json, más sobre esto en el comentario de @James Batchelor (pero no lo probé)
Tuve un problema similar pero con el administrador de procesos del nodo pm2. Estoy tratando de ejecutar una aplicación nodejs en modo clúster, pero siempre termina con el mismo código de error [ERR_UNSUPPORTED_ESM_URL_SCHEME] . Esta publicación es el resultado principal de Google al buscar mi problema, por lo que dejar mi método para resolverlo podría ser útil para alguien.
La solución es instalar Windows Subsystem for Linux (WSL)
Esto le permite ejecutar nodejs en Linux, donde se puede evitar el error anterior ya que el esquema de URL se aceptaría allí. Observe el mensaje de error: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'