Блог

Главная - Вопросы по программированию - createVNode не является функцией (Vue с Laravel)

createVNode не является функцией (Vue с Laravel)

#javascript #laravel #vue.js

#javascript #laravel #vue.js

Вопрос:

Я пытаюсь сделать рендеринг компонента в соответствии с примером, который я нашел в Интернете.

Я создал пример проекта, и он там работает нормально, но он выходит из строя, когда я пытаюсь использовать то же самое в официальной базе кода.

вот содержимое файла блейда, который визуализируется.

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA Demo</title>
</head>
<body>
    <div id="app">
        asdfsadfsadsdf
        <example-component></example-component>
    </div>

    <script src="js/app.js"></script>
</body>
</html>

затем, вот app.js

 window.Vue = require("vue").default;
import ExampleComponent from './components/ExampleComponent.vue';

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

а вот ExampleComponent.vue

 <template>
    <div>
        <div>Example Component</div>
    </div>
</template>
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

вот как выглядит страница:
введите описание изображения здесь

и вот ошибка: введите описание изображения здесь

Забавный факт: когда я пытаюсь включить подобный компонент вместо этого, он отображает «Test», как и ожидалось

 Vue.component('example-component', {
    template: '<div>Test</div>'
});

итак, мне ясно, что проблема в этой строке / файле

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

Ответ №1:

Я нашел ответ!! Спустя почти 8 часов…

введите описание изображения здесь

Оказывается, ошибка «vue-loader» 16.1.2 package.json была ошибкой. Я попробовал точно такую же конфигурацию, но изменил «16.1.2» на «15.9.2» и наоборот 4-5 раз и запустил

 rm -rf node_modules/
rm package-lock.json
npm cache clear --force
npm install

между каждым изменением пакета.

Забавный факт: после этого ваш компонент будет отображаться при записи

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

в вашем app.js