importar un paquete en ES6: “Error al resolver el especificador de módulo “vue””

⏰ 7 minutos de lectura

Intentando seguir algunos tutoriales de Vue y actualmente no puedo importar Vue en un .js archivo y luego importar este archivo en mi index.html. Así es como estoy importando el script en mi index.html:

<script src="https://stackoverflow.com/questions/52612446/./js/main.js" type="module"></script>

Si hago esto en mi main.js expediente:

import Vue from 'vue';

Me sale el siguiente error en la consola del navegador:

TypeError no capturado: no se pudo resolver el especificador de módulo “vue”. Las referencias relativas deben comenzar con “https://stackoverflow.com/”, “./” o “../”.

Si mi línea de importación a:

import Vue from '../../node_modules/vue';

Entonces me sale un error diferente:

http://localhost:63342/vue-oficial-tutorial/node_modules/vue
net::ERR_ABORTED 404 (No encontrado)

¿Qué estoy haciendo mal?

  • ¿estás trabajando con webpack o vue cli 3…?

    – Boussadjra Brahim

    2 oct 2018 a las 16:23

  • @boussadjrabrahim – Gracias. Para ser honesto, no estoy muy seguro. lo hice npm install vue Poder hacer import Vue from 'vue' sin que ESLint se queje. Pero no recuerdo haber instalado vue cli. tengo un package.json archivo en la carpeta raíz del proyecto que incluye vue como una dependencia después de haber instalado vue con npm

    – cobertura cero

    2 oct 2018 a las 16:25

  • Simplemente muestra la importación de Vue. ¿Cómo cargó el script vue.js en su HTML?

    – Aarón Digulla

    16 de septiembre de 2019 a las 8:22

avatar de usuario
evgeny

La forma en que puede usar los módulos ES en tu navegador directamente (a partir de junio de 2020) es así:

  1. Utilice la versión ESM de sus dependencias (la que tiene import en vez de require). Por ejemplo, la versión de Vue ESM está disponible en: https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js

  2. Haz que tu navegador funcione con el experimental importmap rasgo. Los mapas de importación son una nueva recomendación web, que aún no es compatible con los navegadores principales. https://wicg.github.io/import-maps/#import-mapa En Chrome esto está debajo chrome://flags#enable-experimental-productivity-features
    (las últimas versiones de Chrome movieron esto bajo chrome://flags#enable-experimental-web-platform-features)

  3. Crear un importmap en su archivo HTML. Sólo funciona con en línea <script> etiquetas en este momento en Chrome. Por ejemplo:

<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
  "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
} }
</script>
  1. Cargue su propio código como un módulo ESM.
<script type="module" src="./main.js"></script>
  1. En sus propios scripts y los scripts que importa, ahora puede importar con éxito desde módulos con nombre.

Ejemplo completo:

<html>
<body>
<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-beta.14/vue.esm-browser.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.0-alpha.12/vue-router.esm.js",
  "vuex":       "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.0-beta.2/vuex.esm-browser.js"
} }
</script>
<script type="module">
import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'

const router = createRouter()

export default createApp({
  router
})
</script>
</body>
</html>

avatar de usuario
IVO GELOV

ACTUALIZACIÓN (2020-05-10)

Uso de módulos ES6 sin Webpack

Si está trabajando con ES6 entonces tú no debe insertando manualmente su main.js en index.html – esto será manejado por paquete web. En realidad, el tutorial más simple para Vue es así:

  1. npm install -g vue-cli
  2. vue init webpack mi_proyecto
  3. npm run dev (y comience a desarrollar; el resultado está disponible en http://localhost:8080)
  4. npm run build (el resultado está disponible dentro del ./dist carpeta de tu proyecto

Además, deberías importar Vue así

importar Vue desde ‘vue’;

y no así

importar Vue desde ‘../../node_modules/vue’;

EDITAR

De acuerdo, si insiste en seguir el camino de los principiantes y no usar Webpack y componentes Vue de un solo archivo, entonces debería comenzar así:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>My beginners project</title>
    <link rel="stylesheet" type="text/css" href="https://stackoverflow.com/assets/css/styles.css" />
  </head>

  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <!-- templates for your components -->
    <template id="login">
      <div>test</div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <!-- code for your components -->
    <script type="text/javascript" src="/app/login.js"></script>
    <!-- Vue Root component should be last -->
    <script type="text/javascript" src="/app/app.js"></script>
  </body>

</html>

Y tu /app/app.js se verá así:

var badRoute = Vue.component('bad-route', {
    template: '<div id="bad_route"><h1>Page Not Found</h1><p>Sorry, but the page you were trying to view does not exist.</p></div>'
});
var vue_router = new VueRouter({
    base: '/app'
    , mode: 'hash'
    , routes: [{
        path: "https://stackoverflow.com/"
        , redirect: '/login'
    }, {
        path: '/login'
        , component: loginForm
        , name: 'LOGIN'
    }, {
        path: '*', // should be last, otherwise matches everything
        component: badRoute
        , name: 'NOT FOUND'
    }]
});
// Main application
var vue_app = new Vue({
        router: vue_router
    , })
    .$mount('#app');

Y tu /app/login.js componente se verá así:

var loginForm = Vue.component('login-form', {
    template: '#login', // should match the ID of template tag
    data: function() {
        var a = {
            username: ''
            , password: ''
        , };
        return a;
    }
    , methods: {}
});

  • Lo siento. Estoy seguro de que hay algo que me estoy perdiendo, pero no entiendo cómo esto responde a mi pregunta. Si simplemente elimino la importación manual del main.js etiqueta de secuencia de comandos, entonces… no pasa nada.

    – cobertura cero

    2 oct 2018 a las 17:13

  • también: estoy haciendo import Vue from 'vue' pero obtengo un error de sintaxis en el archivo JS “Error de sintaxis no detectado: identificador inesperado” en la línea donde lo importo así.

    – cobertura cero

    2 oct 2018 a las 17:15

  • Intentaré aclarar los pasos. En el paso 1, instala la herramienta Vue-CLI globalmente en su computadora. En el paso 2, usa la herramienta para montar un proyecto Vue vacío usando la plantilla oficial de Webpack. En el paso 3, inicia un servidor web de desarrollo para que pueda ver de inmediato cómo se ven sus nuevas aplicaciones web (abriendo la URL especificada en su navegador). Aquí escribes tu código en main.jsluego en App.vue y luego en sus otros componentes Vue de un solo archivo (si los crea). En el paso 4, crea su proyecto y lo implementa ./dist carpeta en su alojamiento.

    – IVO GELOV

    2 oct 2018 a las 17:23

  • Lo siento. Todavía no entiendo por qué lo que estoy haciendo según lo anterior no funciona. No tengo instalado vue-cli porque el tutorial oficial establece explícitamente que los principiantes no deberían seguir ese camino. ¿Por qué no puedo usar import Vue from 'vue' en mi main.js archivo y simplemente hacer que se procese correctamente? (No me estoy “quejando”, esta era mi pregunta real)

    – cobertura cero

    2 oct 2018 a las 17:25

  • @zerohedge Si trabaja con módulos pero sin Vue-CLI, debería leer este artículo: vuejsdevelopers.com/2019/02/04/vue-es-module-browser-build

    – IVO GELOV

    9 de mayo de 2020 a las 16:41

Solo puede usar “importar vue…” si está usando la CLI y el paquete web, etc.

Si está utilizando Vue directamente en una página web, puede seguir las instrucciones en https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Incluir e incluya una línea como esta en su archivo HTML:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Haga esto antes de importar su propio script y luego Vue se definirá y no es necesario volver a importarlo. Importe su script sin el atributo “módulo”. En el script, puede ejecutar:

var x = new Vue({ 
  el: '#myApp',
  ... all the other stuff ...
})

Esto supone que en algún lugar de su página HTML tiene:

<div id=myApp></div>

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad