Level 12
VueRouter is a default export not named.
import VueRouter from 'vue-router'
Dec 14, 2020
12
Level 1
WARNING in ./resources/js/app.js :"export 'VueRouter' was not found in 'vue-router'
Im using VueJs and Laravel8 and i want to import vue-router. Her is my app.js code
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('@fortawesome/fontawesome-free/js/all.js');
window.Vue = require('vue');
//Import View Router
import Vue from 'vue';
import {VueRouter} from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
//Import Form
import Form from './Form';
window.Form = Form;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('pagination', require('laravel-vue-pagination'));
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('home-page', require('./home/Home.vue').default);
Vue.component('product-page', require('./produits/Produit.vue').default);
Vue.component('createproduit-page', require('./produits/CreateProduit.vue').default);
Vue.component('editproduit-page', require('./produits/EditProduit.vue').default);
Vue.component('showproduit-page', require('./produits/ProduitShow.vue').default);
Vue.component('produitlist-page', require('./produits/ProduitsList.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
router: new VueRouter(routes),
components: { App },
});
and my route.js
import Test from './produits/Test.vue'
export default {
mode: 'history',
routes: [{
path: '/Test',
component: Test,
}]
}
somehow i get the error
WARNING in ./resources/js/app.js :
"export 'VueRouter' was not found in 'vue-router'
@ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/style.scss
Please help me, I have already searched in vain on the internet for 2 weeks already
Level 1
@apex1 I have also try
import VueRouter from 'vue-router'
And get the same error.
Im using vue-router 4
Level 12
You're using vue-router 4 but you're using vue-router 3 and Vue 2 api?
And what is
components: { App }
Where is App defined?
Level 1
@apex1 , I can really answer i took the code on a example of vuejs. Im New in vuejs. Please help to correct it.
Level 12
Okay can you show youre package.json file?
Level 1
{
"dependencies": {
"@coreui/chartjs": "^2.0.0",
"@coreui/coreui": "^3.4.0",
"@coreui/icons": "^1.0.1",
"@coreui/icons-vue": "^1.3.5",
"@coreui/utils": "^1.2.4",
"@fortawesome/fontawesome-free": "^5.15.1",
"@popperjs/core": "^2.5.4",
"chart.js": "^2.9.3",
"cropperjs": "^1.5.7",
"font-awesome": "^4.7.0",
"jquery": "^3.5.1",
"laravel-mix": "^5.0.9",
"laravel-vue-datatable": "^0.6.0",
"laravel-vue-pagination": "^2.3.1",
"mdbvue": "^6.7.2",
"perfect-scrollbar": "1.5.0",
"vue": "^2.6.12",
"vue-plain-pagination": "^0.3.0",
"vue-server-renderer": "^2.6.12",
"vuejs-datatable": "^2.0.0-alpha.7",
"yargs-parser": "^20.2.4"
},
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-object-rest-spread": "^7.9.6",
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
"@babel/preset-env": "^7.12.10",
"@coreui/svg-injector": "^1.0.0",
"@coreui/vendors-injector": "^1.0.2",
"@vue/cli-service": "^4.5.8",
"animate.css": "^4.1.0",
"apexcharts": "^3.22.3",
"autoprefixer": "^9.8.0",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-es2015-modules-strip": "^0.1.1",
"bootstrap": "^4.5.2",
"bootstrap-vue": "2.17.3",
"browser-sync": "^2.26.7",
"chalk": "^4.0.0",
"clean-css-cli": "^4.3.0",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.3",
"echarts": "^4.9.0",
"eslint": "^7.15.0",
"eslint-config-xo": "^0.29.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-unicorn": "^20.0.0",
"foreach-cli": "^1.8.1",
"highcharts": "^7.2.2",
"highcharts-vue": "^1.3.5",
"imports-loader": "^0.8.0",
"jquery": "^3.2",
"js-beautify": "^1.11.0",
"jsdom": "^16.2.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"minimist": "^1.2.5",
"node-sass": "^4.14.1",
"nodemon": "^2.0.4",
"npm-run-all": "^4.1.5",
"popper.js": "^1.12",
"postcss-cli": "^7.1.1",
"postcss-combine-duplicated-selectors": "^8.1.0",
"postcss-merge-rules": "^4.0.3",
"pug": "^2.0.4",
"resolve-url-loader": "^3.1.0",
"rimraf": "^3.0.2",
"sass": "^1.30.0",
"sass-loader": "^8.0.2",
"shelljs": "^0.8.4",
"stylelint": "^13.8.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.0.0",
"stylelint-scss": "^3.17.2",
"sync-glob": "^1.4.0",
"vue": "^2.6.12",
"vue-apexcharts": "^1.6.0",
"vue-echarts": "^4.1.0",
"vue-router": "^4.0.1",
"vue-template-compiler": "^2.6.12",
"vue-toasted": "^1.1.28",
"vue-touch": "2.0.0-beta.4",
"vue2-google-maps": "^0.10.7",
"vuetable-2": "^2.0.0-beta.4",
"vuetrend": "^0.3.4",
"vuex": "^3.6.0"
},
"engines": {
"node": ">=8"
},
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
}
```
Level 12
Okay try removing vue-router4 and install vue-router3 and make sure to import VueRouter as a default export.
What happens then?
Level 1
i have try this and nothing but the same error
Level 1
I still can't get the answer can someone help me ?
Level 47
in your routes.js , put
import VueRouter from 'vue-router'
at the top of the file
then put
export default new VueRouter({
routes,
mode: 'history'
})
at the end of the file , assuming you have a routes array
in app.js change to
import router from './routes'
const app = new Vue({
el: '#app',
router: router,
});
Level 1
@maverickchan i have change things like you suggest but and the same error was reported on the route.js file
"export 'VueRouter' was not found in 'vue-router'
@ multi ./resources/js/app.js ./resources/sass/app.scss ./resources/sass/style.scss```
Level 1
I had the solution to my problem.
i had not set up the dependency of bootstrap-vue properly, it was in my package.jason, but not the dependency file, I had to install it via npm install bootstrap-vue.
Thank you very much for your help.
Please or to participate in this conversation.