I am totally new on Laravel + VueJs. I am using laravel 8 and VueJS 2.6.12 with Vue-Router 3.5.2.
I am getting following error when I run command below:
*npm run dev*
WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)
WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 9:9-19
export 'openBlock' (imported as '_openBlock') was not found in 'vue' (possible exports: default)
WARNING in ./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Dashboard.vue?vue&type=template&id=040e2ab9) 9:23-35
export 'createBlock' (imported as '_createBlock') was not found in 'vue' (possible exports: default)
I have no idea where am I making mistake?
Dashboard.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
I'm an dashboard component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js
require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'
import Dashboard from './components/Dashboard.vue'
Vue.use(VueRouter)
let routes = [
{ path: '/dashboard', component: Dashboard }
]
const router = new VueRouter({
routes: routes
})
const app = new Vue({
router
}).$mount('#app')
Here is my package.json file. I have VueJS 2.6.12 with Vue-Router 3.5.2.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#popperjs/core": "^2.9.2",
"#vue/compiler-sfc": "^3.1.4",
"axios": "^0.21",
"bootstrap": "^4.6.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^16.2.0",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
"admin-lte": "^3.1.0",
"bootstrap-vue": "^2.21.2",
"vue-router": "^3.5.2"
}
}
Can someone help where is issue? I beginner and need suggestion.
Related
I am working on vue js 2 version and I needed to download font-awsome library for styling purpose. However, when I downloaded the files it seemed not compatible with my project so I deleted/uninstalled them (the font-awsome libraries), and then all of a sudden when I tried to refresh the server I got this error in the console :
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is
undefined
Note that the code was working fine before installing and uninstalling the the font-awsome libraries, I don't really know what happened I also did try to ctrl + z to restore the main.js but is still showing the same error.
1- main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueFirestore from 'vue-firestore'
import JQuery from 'jquery'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import './assets/app.scss'
import swal from 'sweetalert2';
// import VoerroTagsInput from '#voerro/vue-tagsinput';
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
window.$ = JQuery
Vue.use(VueFirestore, {
key: 'id', // the name of the property. Default is '.key'.
enumerable: true // whether it is enumerable or not. Default is true.
})
Vue.use(VueFirestore)
Vue.config.productionTip = false
// Make BootstrapVue available throughout your project
// Vue.use(createPopper)
let app = '';
if(!app){
new Vue({
router,
render: h => h(App)
}).$mount("#app");
}
window.Swal = swal;
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000
});
window.Toast = Toast;
2- index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'books',
component: () => import('../components/books')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
3- package.json:
{
"name": "vue-firebase-crud",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.22.0",
"core-js": "^3.8.3",
"firebase": "^8.10.0",
"jquery": "^3.6.1",
"sweetalert2": "^11.4.37",
"vue-firestore": "^0.3.30",
"vue-router": "^3.6.5",
"vue2-editor": "^2.10.3"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"node-sass": "^7.0.3",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
4- error in console:
I'm a newbie to Vue.js and first time dealing with vue-router.
Just created a few files and for some reason I don't get to see the template. Compiled successfully but in the browser I get the following error: Failed to resolve component: router-view
main.js
import { createApp } from 'vue';
import VueRouter from 'vue-router';
import { store } from './store';
import App from './App.vue';
import AuthHandler from './components/AuthHandler';
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/oauth2/callback', component: AuthHandler }
]
});
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
App.vue
<template>
<div>
<AppHeader></AppHeader>
<router-view></router-view>
</div>
</template>
<script>
import AppHeader from "./components/AppHeader";
export default {
name: "App",
components: {
AppHeader
}
};
</script>
components/AuthHandler.vue
<template>
<div>
... Please wait
</div>
</template>
<script>
export default {
name: "AuthHandler"
};
</script>
Here is the package.json
package.json
{
"name": "images",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"lodash": "^4.17.21",
"qs": "^6.10.1",
"vue": "^3.0.0",
"vue-router": "^3.5.2",
"vuex": "^4.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
I resolved the problem in the following way. I believe the issue relay on the vue/vue-router versions. I hope this is the correct way :-)
main.js
import { createApp } from 'vue';
import App from './App.vue';
// import VueRouter from './vue-router';
import { createWebHistory, createRouter } from "vue-router";
import { store } from './store';
import AuthHandler from './components/AuthHandler';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/about', component: AuthHandler }
]
});
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
I was an idiot, I wanted to use 'vue add vue-router'. Of course it didn't work.
Vue add router
is the command.
npm install vue-router#4
only installs the package, won't add it to the app. If all is well, main.js should look like this:
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
Unfortunately they forgot to add it to the documentation...
My components are rendering to the client page exactly as written in BootstrapVue, so I'm seeing <b-button> literally rendered to the client page:
<b-button data-v-3d7e72245 id="myBtn" variant="outline-primary">Click Me</b-button>
Shouldn't this be converted into standard HTML during the Vue render process and have the bootstrap classes added automatically?
I'm new to Vue, so I could be missing something obvious - but I'm not seeing any errors when running 'npm run build' in the command line, or in the web console/Vue dev tools.
Header.vue:
<template>
<header id="Header">
<ApplyBtn btnText="Click Me" />
</header>
</template>
<script>
import ApplyBtn from './header/ApplyBtn.vue'
export default {
name: 'Header',
components: {
ApplyBtn
}
}
</script>
Main.js:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer'
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import '/scss/global/duo-theme.scss'
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.config.devtools = true
Vue.config.productionTip = false
// Custom widgets
Vue.component('applybtn', require('./components/global/header/ApplyBtn.vue').default);
window.Vue = Vue;
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Package.json:
{
"name": "VueBS",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"acorn": "^8.1.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"bootstrap-scss": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.10.0",
"css-loader": "^5.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"intersection-observer": "^0.12.0",
"jquery": "^1.12.4",
"mini-css-extract-plugin": "^0.9.0",
"popper.js": "^1.16.1",
"regenerator-runtime": "^0.13.7",
"rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"typescript": "^4.2.3",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.3",
"vuetify": "^2.4.9"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-service": "^4.5.12",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"html-webpack-plugin": "^5.3.1",
"sass": "^1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.3.1",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0",
"webpack": "^4.46.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Try placing your Vue.use before you create your Vue instance.
Change this
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App')
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
To this
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
new Vue({
vuetify,
render: h => h(App)
}).$mount('#App');
I just added a simple component called AddScan to a v-dialog however I get this in console:
[Vue warn]: Unknown custom element: <AddScan> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
Also when I edit the file and save it vue-cli is not compiling it but when I edit another component and save the changes it compiles but gives me this error:
warning in ./src/views/ScanResults.vue?vue&type=script&lang=js&
"export 'AddScan' was not found in '#/components/scan'
This is really the first time I have this problem I have no idea what's wrong.
I'm on Vue 2.6.10 and Vuetify 2.1.7.
ScanResults.vue(parent):
<template>
<v-layout row>
<v-flex row class="justify-space-between ma-5 ">
<div>
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on }">
<v-btn v-on="on" class="ma-2 lowerCase" color="#E0E0E0">
Ajouter un scan
</v-btn>
</template>
<AddScan :items="items"></AddScan>
</v-dialog>
</div>
</v-flex>
<v-flex v-if="items.length < 2">
<ScanGrid :items="items"></ScanGrid>
</v-flex>
</v-layout>
</template>
<script>
import { mapGetters } from "vuex";
import { ScanGrid } from "#/components/scan";
import { AddScan } from "#/components/scan";
export default {
name: "ScanResults",
components: {
ScanGrid,
AddScan
},
...
AddScan.vue(child):
<template>
<v-card>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i">
<v-list-item-content>
<v-list-item-title v-text="item.StorageName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "AddScan",
computed: {
...mapGetters(["getIsDarkMode", "getPhysicalInventoryBatch"])
},
async created() {
try {
await this.$store.dispatch("loadPhysicalInventoryBatch");
const items = this.$store.getters.getPhysicalInventoryBatch;
this.$emit("update", items);
} catch (e) {
console.error(e);
}
},
data: () => ({
items: [],
dialog: false
})
};
</script>
package.json:
{
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8084",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"lint:fix": "vue-cli-service lint --fix"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.25",
"#fortawesome/free-solid-svg-icons": "^5.11.2",
"#fortawesome/vue-fontawesome": "^0.1.7",
"axios": "^0.19.0",
"core-js": "^3.3.5",
"material-design-icons-iconfont": "^5.0.1",
"moment": "^2.24.0",
"qrcode": "^1.4.2",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-moment": "^4.0.0",
"vue-mugen-scroll": "^0.2.6",
"vue-promised": "^1.2.1",
"vue-router": "^3.1.3",
"vuetify": "^2.1.7",
"vuetify-dialog": "^0.3.8",
"vuex": "^3.0.1",
"vuex-i18n": "^1.13.1",
"vuex-persistedstate": "^2.6.0"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.11.2",
"#vue/cli-plugin-babel": "^4.0.5",
"#vue/cli-plugin-eslint": "^4.0.5",
"#vue/cli-plugin-pwa": "^4.0.5",
"#vue/cli-plugin-unit-jest": "^4.0.5",
"#vue/cli-service": "^4.0.5",
"#vue/eslint-config-prettier": "^4.0.1",
"#vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^23.6.0",
"compression-webpack-plugin": "^3.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"lerna": "^3.18.3",
"sass": "^1.23.1",
"sass-loader": "^7.3.1",
"vue-template-compiler": "^2.5.21"
}
}
vue.config.js:
const CompressionPlugin = require("compression-webpack-plugin");
const path = require("path");
module.exports = {
outputDir: path.resolve(__dirname, "../PmpTeamMateDeploy/Pmp.Web.Inventory"),
configureWebpack: {
plugins: [new CompressionPlugin()],
devtool: "source-map"
},
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/style/style.scss";
`
}
}
},
pwa: {
workboxPluginMode: "InjectManifest",
workboxOptions: {
swSrc: "src/service-worker.js",
exclude: [/\.map$/, /manifest\.json$/]
},
themeColor: "#78a22e"
},
chainWebpack: config => {
["vue-modules", "vue", "normal-modules", "normal"].forEach(match => {
config.module
.rule("scss")
.oneOf(match)
.use("sass-loader")
.tap(opt =>
Object.assign(opt, { data: `#import '~#/assets/style/style.scss';` })
);
});
}
};
UPDATE: In my parent component in components section I added AddScan: () => import("#/components/scan") and that got rid of the compile errors I was getting however I still can't compile when I save the AddScan file.
I also update vue-cli and all plugins and dependencies from 3.12.1 to 4.0.5, core-js from 2.6.10 to 3.3.5, sass-loader from 7.3.1 to 8.0.0 but reverted to 7.3.1 because it threw me 104 errors on compile for some reason, as well as Node from 10.something to 12.13.0.
UPDATE 2: Basically the problem seems that vue refuses to compile new files. The old ones compile fine for some reason. I tried loading an old version of the branch with older packages versions, just npm install, still won't compile new files.
Well I feel like an unbelievable idiot but here we go: The component was in components/scan but since it was a parent component and I'm calling it in a view I completely forgot to do import/export it in my index.js file in the scan folder.
components/scan/index.js:
import ScanGrid from "./ScanGrid";
import ScanAdd from "./ScanAdd";
export { ScanGrid };
export { ScanAdd };
I'm using Vue 2.0 standalone and i have a problem with components with Slot. Always render default value inside slot. Never render content inside custom component
package.json
{
"name": "web-components",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"watchify": "watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js",
"serve": "http-server -o -c 1 -a localhost",
"dev": "npm-run-all --parallel watchify serve",
"lint": "eslint --ext .js,.vue src test/unit",
"test": "karma start karma.conf.js",
"build": "cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js | uglifyjs -c warnings=false -m > dist/build.js"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
},
"aliasify": {
"aliases": {
"vue": "vue/dist/vue"
}
},
"dependencies": {
"vue": "^2.0.1"
},
"devDependencies": {
"aliasify": "^2.0.0",
"babel-core": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-runtime": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.1.0",
"browserify-hmr": "^0.3.1",
"cross-env": "^2.0.0",
"envify": "^3.4.1",
"eslint": "^3.3.0",
"eslint-config-standard": "^5.3.5",
"eslint-plugin-html": "^1.5.2",
"eslint-plugin-promise": "^2.0.1",
"eslint-plugin-standard": "^2.0.0",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^1.2.0",
"karma-browserify": "^5.1.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-spec-reporter": "0.0.26",
"npm-run-all": "^2.3.0",
"phantomjs-prebuilt": "^2.1.3",
"proxyquireify": "^3.0.1",
"uglify-js": "^2.5.0",
"vueify": "^9.0.0",
"watchify": "^3.4.0"
}
}
main.js
//this show Failed to mount component: template or render function not defined.
//import Vue from 'vue/dist/vue'
import Vue from 'vue'
import Hello from './components/Hello.vue'
Vue.component('Hello',Hello)
new Vue({ // eslint-disable-line no-new
el: '#app'
});
Hello.vue
<template>
<div id="hello">
<h1>{{ msg }}</h1>
<slot>defect</slot>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>web-components</title>
<link rel="stylesheet" href="dist/build.css">
</head>
<body>
<div id="app">
<hello><label>change value</label></hello>
</div>
<script src="dist/build.js"></script>
</body>
</html>
EDIT: If i use npm run build instead of nrpm run dev. This work fine.
It's likely you're using the "runtime-only" build. If you're using that then all your templates must be in Vue files. Since your app's template is in the index.html it won't work. So either put your apps template into a Vue file and render that or use the "Runtime + Compiler" build. You can read more about that here: http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build