Problem is by building my project in production mode.
I try to import component in my main.js with construction
const isBrowser = typeof window !== 'undefined';
const VueHead = isBrowser ? require('vue-head') : undefined;
In next line i use this component with
Vue.use(VueHead)
and become an error:
Uncaught TypeError: Cannot read property 'install' of undefined.
I can't change construction with "require" on simple import. This option doesn't suit me (cause in this case i become an error with webpack "ReferenceError: window is not defined" and with construction with "require" i try to resolve this error).
full main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import VeeValidate from 'vee-validate'
const isBrowser = typeof window !== 'undefined';
const VueHead = isBrowser ? require('vue-head') : undefined;
Vue.use(VueHead)
Vue.use(VeeValidate)
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
UPDATE: I try to start my application with pm2 in production mode. When i start with npm run dev, haven't problems or errors
Related
I using vuetify : https://vuetifyjs.com/en/
I want to use moment.js. So I read this reference : https://www.npmjs.com/package/vue-moment
I had run npm install vue-moment
I'm still confused to put this script Vue.use(require('vue-moment'));
In the vuetify, there exist two file : main.js and index.js
main.js like this :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
index.js like this :
import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store({
modules: {
dataStore
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
where do i put Vue.use(require('vue-moment'));?
I try to put it in the main.js, but if i call my vue component, there exist error : ReferenceError: moment is not defined
My vue component like this :
<template>
...
</template>
<script>
export default {
mounted() {
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
};
</script>
I found this at the bottom of the vue-moment npm page
vue-moment attaches the momentjs instance to your Vue app as
this.$moment.
This allows you to call the static methods momentjs provides.
So you should be able to use your original configuration of vue-moment and do this in your mounted() method
mounted() {
let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
notice this.$moment
And for the set up of vue-moment you should place this in your main.js file
main.js
Vue.use(require('vue-moment'))
=========================================================================
GLOBAL
If you want to use moment with Vue globally you can create an Instance Proprety
main.js
import moment from 'moment'
Vue.prototype.moment = moment
In your component you then call this.moment in your methods or computed properties. In your mounted section it would look like this
mounted() {
let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
COMPONENT
If you just want to use moment in a component you can include directly like this
<script>
import moment from 'moment'
export default {
mounted(){
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
}
</script>
When I invoke an imported vuex action in my vue file the code errors out and breaks the site. I've even broken it down to the simplest of things (console log a string from within the action when I click a button tied to that action).
In my Vue root
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import JsonCSV from 'vue-json-csv'
import { store } from './store/index'
Vue.component('downloadCsv', JsonCSV)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
In my .vue file:
import {mapGetters,mapActions} from 'vuex'
methods: {
...mapActions([
'sendDraftSelectionPost'
]),
selectPlayerMethod() {
this.sendDraftSelectionPost('hello')
}
}
In my index.js file in which I've imported Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import { debug } from 'util';
import draft from './modules/draft'
Vue.use(Vuex)
Vue.config.devtools = true
const store = new Vuex.Store({
strict: debug,
modules: {
draft,
}
})
export default store
In my actions.js file:
const actions = {
sendDraftSelectionPost ({ commit }, draftSelection) {
console.log(draftSelection)
}
}
export default actions
The expected results should be I simply see a string console logged in dev console saying 'Hello'
However, I get a bit nasty error saying the following:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"
I haven't even typed the word "dispatch" in my code, so I'm thoroughly confused. After searching on here and finding a lot of posts similar, I haven't found anything that has a solid answer or solution.
Any help is appreciated.
Per conversation with #Phil, the solution to the original problem (not the sub problem stated in the comments) was to fix my import in my root Vue from import { store } from './store/index' to import store from './store'. Thanks, #Phil!!!
I've just started to learn vue and vuex.
I want to use the progressbar from this link
Like the description said I imported the main.js file into my actions.js
import app from '../../../main' //This is causing the error
so I could use this just before my axios-request:
app.$Progress.start()
The main.js file:
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window._ = require('lodash')
require('admin-lte');
require('bootstrap')
} catch (e) {}
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import VueProgressBar from 'vue-progressbar'
import swal from 'sweetalert2'
import moment from 'moment'
Vue.config.productionTip = false
Vue.use(VueProgressBar, {
color: 'rgb(143,255,199)',
failedcolor: 'red',
height: '5px'
})
Vue.use(require('vue-moment'))
Vue.use(moment)
window.bus = new Vue()
window.swal = swal;
const toast = swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3500
})
window.toast = toast
export default new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
This is working, but I'm getting errors when working on those pages.
( "TypeError: _main__WEBPACK_IMPORTED_MODULE_1__.default is
undefined")
Edit: Updated the main.js file
So my question is how do I fix this?
It looks like one of the modules you are importing does export anything default, can you check/include your store and router files?
export default {...} //Missing from one of the modules
The documentation says like this:
<script type="text/javascript" src="assets/js/vue-shopify-products.js"></script>
And then before you initialize vue, you do this:
Vue.use(ShopifyProducts);
What do you do if you use vue-cli webpack template?
My main.js file looks like this
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import * as d3 from 'd3'
import * as shopifyProducts from 'vue-shopify-products'
Vue.config.productionTip = false
Vue.use(shopifyProducts)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
created: function () {
d3.csv('/static/data/csv-files/bicycles.csv', (data) => {
let products = this.$formatProducts(data)
console.log(products)
})
}
})
This doesn't work as I get the error 'Uncaught (in promise) TypeError: _this.$formatProducts is not a function'. What is the correct way to include Vue-Shopify-Products and reference the $formatProducts function?
Since it is an npm package installed as a dependency, you should import it this way,
import defaultExport from "module-name";
so this should work:
import ShopifyProducts from "vue-shopify-products";
Vue.use(ShopifyProducts);
After that you can get rid of the script reference of the module.
Edit 1:
I don't think is going to work since the module you are trying to use as a Vue plugin do not follow the conventions especified on the Vue documentation.
Version
2.5.2
Reproduction link
http://test.airspace.cn/
Steps to reproduce
1.Clear the browser cache
2.Enter url and dev-tool see if there is a blank page phenomenon. lt's because the main.js doesn't request.
3.Refresh the browser, lt's normal.
4.Open a new browser tab and enter the url, blank page will appear occasionally.
What is expected?
can reach the site everytime
What is actually happening?
blank page
open a new tab and enter a url
refresh again and again
this is main.js
import Vue from 'vue'
import Vuex from 'vuex'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '#/config/base'
import * as allFilters from '#/config/filter'
import { category } from '#/config/constant'
import App from '#/App'
import router from '#/router'
import store from '#/store/index'
import '#/directive'
Vue.config.productionTip = false
// Vue.use(Button)
Vue.use(Vuex)
Vue.use(ElementUI, { size: 'small' })
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Object.keys(allFilters).forEach((key) => {
Vue.filter(key, allFilters[key])
})
store.dispatch('dispatchPlaneTypes')
store.dispatch('dispatchPlaneBrands')
process.env.NODE_ENV === 'development' ? console.log(category) : '' //eslint-disable-line