web-dev-qa-db-fra.com

Vue Le modèle ou la fonction de rendu n’a pas encore été défini. Je n’utilise pas non plus?

Ceci est mon fichier principal javascript:

import Vue from 'vue'

new Vue({
  el: '#app'
});

Mon fichier HTML:

<body>
    <div id="app"></div>

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Configuration Webpack de Vue.js avec la version d'exécution:

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

Je reçois toujours cette erreur bien connue:

[Vue warn]: Echec du montage du composant: modèle ou fonction de rendu non définie. (trouvé dans l'instance racine)

Comment se fait-il que je n’ai même pas une seule chose à l’intérieur de ma #app div où je monte Vue, je reçois toujours une erreur de rendu/modèle? Ça dit found in root mais il n'y a rien à trouver car il n'a même pas de contenu?

Comment suis-je supposé monter si cela ne fonctionne pas?

Edit:

Je l'ai essayé comme ça qui semble fonctionner:

new Vue(App).$mount('#app');

Cela a du sens parce que l’utilisation de la propriété el implique que vous "scanniez" cet élément dom pour n’importe quel composant et que cela est inutile car la compilation au moment de l’exécution n’a pas de compilateur.

Néanmoins, c’est un message d’erreur extrêmement étrange à lancer, en particulier lorsque j’ai vidé toute ma div div.

J'espère que quelqu'un pourra confirmer mes pensées.

javascriptvuejs2vue-componentvue.js
16
Stephan-v

La raison pour laquelle vous recevez cette erreur est que vous utilisez la version d'exécution qui ne prend pas en charge les modèles dans les fichiers HTML, comme indiqué ici vuejs.org

Ce qui se passe essentiellement avec vue) est que leurs modèles sont compilés au moment de la compilation en fonctions de rendu là où votre fonction de base essayait de compiler à partir de votre élément html.

10
Justin MacArthur

Si quelqu'un d'autre continue à avoir la même erreur. Ajoutez simplement une div supplémentaire dans votre modèle de composant.

Comme le dit la documentation:

Le modèle de composant doit contenir exactement un élément racine

Vérifiez cet exemple simple:

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>
10
Dennis Adriaansen

Dans mon cas, j'ai importé mon composant (dans le routeur) en tant que:

import bsw from 'common-mod/src/components/webcommon/webcommon'

Il est simplement résolu si je le change en

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
10
Asqan

J'utilise TypeScript avec vue-property-decorator et ce qui m'est arrivé est que mon IDE complété automatiquement "MyComponent.vue.js" au lieu de "MyComponent.vue". Cela m'a Erreur.

Il semble que la morale de l'histoire soit que si vous obtenez cette erreur et que vous utilisez tout type de configuration de composant à fichier unique, vérifiez vos importations dans le routeur.

1
LeftOnTheMoon

J'ai eu la même erreur avant d'oublier d'enregistrer le contenu du composant dans l'élément template.

J'ai d'abord ceci

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';

Vue.use(VueRouter);

Vue.router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

Puis dans Home.vue j'ai:

<h1>Hello Vue</h1>

d'où l'erreur:

Failed to mount component: template or render function not defined.

found in

---> <Home> at resources/js/com/Home.vue
       <Root>

Enfermer dans l'élément a corrigé l'erreur:

<template>
   <h1>Hello Vue</h1>
</template>
0
Emeka Mbah

Je n'arrive pas à croire comment j'ai résolu le problème! solution bizarre!
J'ai maintenu l'application en marche, puis j'ai supprimé toutes les balises de modèle, puis je les ai renvoyées et tout a fonctionné! mais je ne comprends pas ce qui s'est passé.

0
Tanaka

J'ai personnellement rencontré la même erreur. Aucune des solutions ci-dessus n'a fonctionné pour moi.

En fait, mon composant ressemble à ceci (dans un fichier appelé my-composant.js):

Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

Et je l'ai importé comme ceci dans un autre composant:

import MyComponent from '{path-to-folder}/my-component';

Vue.component('parent_component', {
    components: {
        MyComponent
    }
});

La chose étrange est que cela a fonctionné dans certains composants mais pas dans ce "parent_component". Donc, ce que je devais faire dans le composant lui-même était de le stocker dans une variable et de l'exporter par défaut.

const MyComponent = Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

export default MyComponent;

Cela peut sembler évident, mais comme je l’ai dit plus haut, cela fonctionne dans 1 autre composant sans cela, donc je ne comprenais pas vraiment pourquoi, mais au moins, cela fonctionne partout maintenant.

0
ZyDucksLover

Dans mon cas, je recevais l’erreur parce que je m’étais mis à niveau de Laravel Mix Version 2 à 5.

Dans Laravel Mix Version 2, vous importez les composants vue comme suit:

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);

Dans Laravel Mix Version 5, vous devez importer vos composants comme suit:

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

Voici la documentation: https://laravel-mix.com/docs/5.0/upgrade

0
mutiemule

Dans mon cas, j'utilisais une importation par défaut:

import VueAutosuggest from 'vue-autosuggest';

L'utilisation d'une importation nommée a corrigé le problème: import {VueAutosuggest} from 'vue-autosuggest';

0
Nicholas Betsworth