Level 102
Which line is it complaining about? This?
import VueRouter from "vue-router";
Cause that looks correct
Jul 12, 2022
10
Level 12
Uncaught SyntaxError: import not found: default
Anyone can tell me what's wrong in here?
Note that I'm absolutely newbie in Vue.
--
The error I'm getting (From the import of VueRouter in routes.js)
Uncaught SyntaxError: import not found: default
routes.js
import VueRouter from "vue-router";
import ExampleComponent from './components/ExampleComponent.vue';
const routes = [
{
path: '/',
component: ExampleComponent
}
];
const router = new VueRouter({
routes,
});
export default router;
app.js
require('./bootstrap');
import router from './routes.js';
window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router
});
Thanks in advance!
Level 12
@Sinnbeck Yes, that's the line that is causing problems. Can this be related to the fact that it couldn't install the vue-router properly? Because when I run
npm install vue-router
I get
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! dev vue@"^2.6.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.2.0" from [email protected]
npm ERR! node_modules/vue-router
npm ERR! vue-router@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
And I had to --force it?
I actually have no idea what this error means.
Level 102
@Laralex it looks a bit like you are forcing the installation of v4 when you it perhaps expects v3. I'm not a vue user, but I suggest you find out the correct version to install and install that. And then follow the docs that matches the version
Level 102
npm install vue-router@^3.0
Level 12
@Sinnbeck Well I just did
npm remove vue
npm install vue@next
npm install vue-router
and no error occurred but the console error is still there.
Uncaught SyntaxError: import not found: default
package.json
// ......
"dependencies": {
"vue": "^3.2.36",
"vue-router": "^4.1.2"
}
Level 102
@Laralex what version of vue router is installed then?
Level 12
"vue-router": "^4.1.2"
Level 12
@Sinnbeck I'm also getting strange errors before the vue-router installation like
Uncaught ReferenceError: require is not defined
on line
require('./bootstrap');
Level 102
@Laralex it seems it was changed a bit in v4 https://router.vuejs.org/guide/
Level 12
@sinnbeck Another strange error I'm getting:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
I have no idea how I fixed the errors above but this is freaking me out now because I tried almost everything that people suggested in the forums and nothing works. What can I do about this? Here's how my one&only ExampleComponent is looking
export default {
template: `
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
`,
mounted() {
console.log('Component mounted.')
}
}
app.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes.js';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes,
});
new Vue({
router
}).$mount('#app');
routes.js
import ExampleComponent from './components/ExampleComponent.vue';
const routes = [
{
path: '/',
component: ExampleComponent
}
];
export default routes;
welcome view
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@vite(['resources/js/app.js', 'resources/css/app.css'])
</head>
<body>
<div id="app">
<h1>Hello World!</h1>
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
</p>
<router-view></router-view>
</div>
</body>
</html>
Please or to participate in this conversation.