The Vue Konva setup runs properly on local dev envs
After building the app as it fails to find v-stage tag and Konva component also
Versions being used
"vue": "^2.6.14",
"vue-konva": "^2.1.7",
"konva": "^8.3.10",
Error message
import VueKonva from 'vue-konva'
import App from 'file'
window.Vue.use(VueKonva)
window.custom.extension.register('#ext-size-comparison-view', {
mounted(element) {
window.FPI.extension.mountApp({
element,
component: App,
})
},
})
Error Message
Uncaught TypeError: Cannot read properties of undefined (reading 'component')
at Module.<anonymous> (vue-konva.js:304:106)
at r (vue-konva.js:34:30)
at Object.<anonymous> (vue-konva.js:111:18)
at r (vue-konva.js:34:30)
at vue-konva.js:98:18
at vue-konva.js:15:17
at vue-konva.js:7:20
at 6168 (vue-konva.js:5:1)
Related
I'm trying to add vue-phone-number-input on my project. I have installed the package with npm install vue-phone-number-input.
Here is my main.js :
// Code ....
import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
const app = createApp(App)
.use(IonicVue)
.use(router)
.use(VueCordova)
.use(Camera)
app.component("master-layout", MasterLayout)
app.use(store);
app.component('vue-phone-number-input', VuePhoneNumberInput);
router.isReady().then(() => {
app.mount('#app');
});
And I've imported this line on my template :
<vue-phone-number-input v-model="yourValue" />
But nothing's happening. I have an error :
vue-phone-number-input.common.js?ea25:7355 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.render (vue-phone-number-input.common.js?ea25:7355:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:890:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5598:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5712:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5726:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5508:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5466:1)
at patch (runtime-core.esm-bundler.js?d2dd:5068:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:5252:1)
What's wrong? When I use native Vue, I've never had any problems importing modules. But with Ionic, I've never been able to.
Thank you.
That plugin only works with vue2 : https://github.com/LouisMazel/vue-phone-number-input/issues/159. Ionic uses vue3, you need to use the other plugin he provides.
I'm struggling to understand how to use functions in Vue 3 from 3rd party JavaScript libraries. I am trying to use the interactive fiction library inkjs in my Vue 3 project. I installed it using: npm install inkjs. I am using the composition API. However, I cannot access the functions in inkjs. Specifically, this does not work:
import { ref } from '#vue/reactivity'
import getStory from '../ink/story.js'
import { inkjs } from 'inkjs'
export default {
name: 'HomeView',
setup() {
const { storyContent } = getStory()
const story = new inkjs.Story(storyContent.value)
return { displayText, story }
}
}
Story is the main function in the inkjs library.
It gives this console error:
HomeView.vue?43d0:29 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Story')
at setup (HomeView.vue?43d0:29:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7160:1)
at setupComponent (runtime-core.esm-bundler.js?d2dd:7114:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5468:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5443:1)
at patch (runtime-core.esm-bundler.js?d2dd:5033:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5655:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5689:1)
I'm trying to integrate the use of Vuex into a very small Vue 3 application, but I'm unable to load things for reasons that are totally unclear to me. My main.js is very simple and does a use() statement on the Vuex store as documentation indicates I should do:
import { createApp } from "vue"
import App from "./app.vue"
import store from "./store.js"
const app = createApp(App)
app.use(store)
app.mount("#app")
The store itself is pretty simple with the first relevant lines looking like the following:
import axios from "axios"
import { createStore } from "vuex"
export default {
store: createStore({
However, when I load my app after it compiles successfully without any warnings, I get this in the debugger:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance.
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function
at <EventListByDay>
at <App>
warn # runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
at Proxy.events (event-list-by-day.vue?04a6:61)
at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
at Proxy.render (event-list-by-day.vue?04a6:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
at effect (reactivity.esm-bundler.js?a1e9:17)
at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)
What am I missing? I know it's something basic here. Note that installed Vuex as npm install --save vuex#next as the Vuex documentation indicated I should do to support Vue 3.
You're exporting it as an object {store: Store} but what you really want to do is export the Store instance created by createStore().
On your store.js
const store = createStore({
...
...
})
export default store
or
export default createStore({
...
...
})
I created (currently standalone) and API and a VueJs (with Vuetify) App and wanted to combine both using the webpack encore bundle for Symfony.
But when I want to build the frontend app, I get this error when executing yarn run encore dev:
(node:12500) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined
at items.forEach.item (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:21:60)
at Set.forEach (<anonymous>)
at Object.getMatches (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:16:9)
at Object.module.exports (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:106:64)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:12500) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:12500) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
This is my webpack.config.js
const Encore = require('#symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.addEntry('js/main', './assets/js/main.js')
.enableVueLoader()
.enableBuildNotifications(true)
.addPlugin(new VuetifyLoaderPlugin())
;
module.exports = Encore.getWebpackConfig();
Any idea? The standalone app is working fine, I simply moved it to the assets/js folder. I require vuetify-loader ^1.2.2 for this.
And this is my main.js:
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify/lib'
import MultiFiltersPlugin from './plugins/MultiFilters'
import 'vuetify/src/stylus/app.styl'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.min.css'
Vue.use(MultiFiltersPlugin);
Vue.use(Vuetify, {
iconfont: 'md',
});
new Vue({render: h => h(App),}).$mount('#app');
Here's an example webpack.config.js file from this working example that shows how to get Symfony and Vuetify (v.2x) to play nice together:
var Encore = require('#symfony/webpack-encore');
// import vuetify-loader as a plugin here
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.enableVueLoader() // <-- IMPORTANT: this loads Vue
// NOTE: I put my Vue app in assets/vue which I think is non-standard
// but it allows me to structure my Vue app as I would in a non-Symfony app
.addEntry('app', './assets/vue/main.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
// add VuetifyLoaderPlugin: THIS loads all of the Vuetify components
.addPlugin(new VuetifyLoaderPlugin())
// enables Sass/SCSS support
.enableSassLoader(options => {
options.implementation = require('sass')
options.fiber = require('fibers')
})
;
module.exports = Encore.getWebpackConfig();
Caveat, I'm not really a symfony developer, but this worked for me. HTH!
I created a vue.js project by Vue CLI 3 with Router.
And I have a component (vue file) that contains statements this.$route.replae.
this.$router.replace({
name: "secure"
});
I wrote a unit test for the component and found an error when running test:unit:
Error: Uncaught [TypeError: Cannot read property 'replace' of undefined]
how should I mock the $router and pass the test?