I've been attempting to replicate a component rendering based on an online example.
While it works smoothly in a sample project, it crashes when applied to the official codebase.
Here is the content of the blade file being rendered:
<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>
Next up, here's app.js:
window.Vue = require("vue").default;
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
And now, let's take a look at ExampleComponent.vue:
<template>
<div>
<div>Example Component</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
This visualizes what the page should appear like:
https://i.sstatic.net/NO9Vu.png
and below is the encountered error: https://i.sstatic.net/y8oGl.png
A noteworthy observation: when I attempt this alternate method of including the component, namely, displaying "Test":
Vue.component('example-component', {
template: '<div>Test</div>'
});
it becomes evident that the issue lies within this specific line/file:
import ExampleComponent from './components/ExampleComponent.vue';