I'm having trouble to run a NativeScript App on the Playground using Vuex.
I've already added the NPM package on the project. And modified my imports from:
import { mapGetters } from 'vuex'
to
import { mapGetters } from '../vuex'
But it doesn't solved the problem.
Then, I've removed all the mapGetters, mapActions from the code. Now it calls the store directly:
return this.$store.getters.[getterName];
However, when I scan the QR code, the error message still says:
Error: com.tns.NativeScriptException: Failed to find module: "vuex", relative to: app/tns_modules/
As this is on the browser, I don't know how to modify or edit the code to reference the Vuex modules.
I've also checked this playground Vue + Vuex sample code. And it runs without problem.
Am I missing something?
Thanks for your time.
Related
In my vue app I had following import in my component
import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
treemapInit(Highcharts);
Now I have nuxt and I need to import this part only for client side, because it fails with an error on server-side.
How to do this? Please don't suggest me Nuxt plugins, since I want to use it local due to performance.
Thanks!
The code executes twice - on server-side and then on client-side. The first run is done in an environment that lacks window and causes Highcharts to be loaded, but not initialized. The fix is to place all modules inits in if checking if Highcharts is an object or a function. It should be an object for module initialization:
import Highcharts from "highcharts";
import treemapInit from "highcharts/modules/treemap";
if (typeof Highcharts === "object") {
treemapInit(Highcharts);
}
Docs: https://github.com/highcharts/highcharts-vue#readme
Similar thread: https://github.com/highcharts/highcharts-vue/issues/73
Case and problem
I´m working on a private project with Vue.js and have the following error, which occurs when I´m trying to use the FileUpload component of PrimeVue:
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.
Trying to use FileUpload in my component:
<template>
<FileUpload name="demo[]" url="" #upload="onUpload" :multiple="true" :maxFileSize="1000000">
<template #empty>
<p>Drag and drop files to here to upload.</p>
</template>
</FileUpload>
</template>
The error only occurs, when I try to use FileUpload, if I remove it, the component works. FileUpload and PrimeVue are imported like they should, in the main.js:
import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";
const app = createApp(App);
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'
import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";
app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)
app.mount('#app')
What I tried so far
I searched this issue, but the only exact match for this error is an old closed issue on GitHub regarding the Calendar component: Issue #808. The error in this issue was caused because of the breaking change with the new PrimeVue API. This should not be my case, because it was introduced with V3.1 and I´m using V3.7.
In case the version is the problem I tested different versions of PrimeVue, like 3.1, 3.2, 3.3 but the error still shows. Thats why the actual dependencie is still the latest:
"primevue": "^3.7.0"
Maybe there is an already existing solution on SO or Google, but either my english is to bad to understand or I´m still to fresh at Vue.js to comprehend the problem.
Thanks in advance!
Your usage of app.use() is incorrect:
app.use(
router,
PrimeVue,
PrimeIcons,
store
)
app.use() takes only two arguments:
first argument: the Vue plugin
second argument: the plugin options
Also, PrimeIcons is not a plugin, so that should not be passed to app.use().
Solution
Pass each plugin individually to app.use():
app.use(router)
.use(PrimeVue)
//.use(PrimeIcons) // not a plugin
.use(store)
I'm attempting to import apexcharts into my nuxt project. I've used both the vanilla lib and vue wrapper.
Simply importing the library causes the following error
Like I said, i've attempted importing both
import ApexCharts from "apexcharts"
and
import VueApexCharts from "vue-apexcharts"
Both return the same error.
Is this something I have to configure in the nuxt.config.js file?
This is because you are using Nuxt.js which does SSR for you. Since document does not exist on the server-side it will break.
To work around it there a couple of approaches:
First you can create a plugin/apex.js which is responsible for registering your components
import Vue from 'vue';
import ApexChart from 'vue-apexcharts';
Vue.component('ApexChart', ApexChart);
and in your nuxt.config.js make sure to load the plugin file on the client-side:
module.exports = {
// ...
plugins: [
// ...
{ src: '~/plugins/charts', ssr: false }
],
// ....
};
Now you can reference the ApexChart component anywhere in your app, also make sure to wrap it with ClientOnly component to prevent Nuxt from attempting to render it on the server-side:
<ClientOnly>
<ApexChart type="donut" :options="chartData.options" :series="chartData.series" />
</ClientOnly>
The other approach is you can import Apex charts as async components, which do not get rendered on the server-side, but it has been a hit and miss with this approach, feel free to experiment.
Generally when using Nuxt or any SSR solution, be careful of the libraries you use as they might have an implicit dependency on the execution environment, like requiring browser-specific APIs in order to work like window or document.
I am using vue.js and created a webcomponent with stencil.js. I don't want to publish the webcomponent to npm, which is why I simply include it in the src/assets directory in my vue project.
However I get the error
[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in --->
<App> at src/app.vue
<Root>
It works without problems with another component I already have in the assets directory.
It also doesn't help to use
Vue.config.ignoredElements = ['my-component'];
since the component is still empty when I run it locally.
Thanks for your help!
If you're including the web component locally, you can use #vue/web-component-wrapper:
import Vue from 'vue'
import wrap from '#vue/web-component-wrapper'
const Component = {
// any component options
}
const CustomElement = wrap(Vue, Component)
window.customElements.define('my-element', CustomElement)
just in case, for me that was a version issue:
my components were defined like that:
export default class Foo extends ScopedElementsMixin(LitElement) {
...
}
And in the vue I did
customElements.define('foo', Foo);
I started received that error when I updated scoped-elements 1.x.x -> 2.x.x.
So when I put everything back to 1.x.x the error just gone.
I'm using mixins in the subset components of app.vue without any problems, everything is good and works fine, but when I want to use it into the app.vue component, i'm having error in console.
<script>
/* eslint-disable */
import PanelUser from "./layouts/PanelUser";
import Auth from "./mixins/Auth";
export default {
name: "App",
mixins: [Auth],
components: {
PanelUser
},
};
</script>
I also can not use the router; when I use it, the page is completely white and nothing is displayed.
I have found how to check this situation.
First, you could see that the error threw at checkComponents method, move your mouse on and left click.
Second, add a break point, and then refresh the page.
Third, maybe you could find that some mixins or components which are referenced show undefined.
In my case, the second mixin is undefind.
Finally, check the reference or the mixin file. I found the reason is that I copied the mixin from another file and forgot to rename the mixin at declare part.
That's all, try to check by yourself. :)
You need to change:
import PanelUser from "./layouts/PanelUser";
To
import {PanelUser} from "./layouts/PanelUser";
And
import Auth from "./mixins/Auth";
To
import {Auth} from "./mixins/Auth";
The error is mixin related.
Make sure your mixins being used in your components are correct. (eg. name, esm import path etc.)
import samplePackage from "sample-package";
import anotherMixin from "another-package/path/to/mixin";
export default {
mixins: [
samplePackage.sampleMixin,
anotherMixin
]
}
After a couple hours of debugging, I found in our case the culprit was vuelidate. We tried to migrate from Webpack to Vite, keeping Vue 2.7, and vuelidate 3.
Importing:
import { validationMixin } from 'vuelidate'
console.log(validationMixin // undefined in production build
printed only undefined after a vite build
After reading about issues related to non-ESM imports (#1, #2) I tried to change the import to vuelidate/src:
import { validationMixin } from 'vuelidate/src/index'
console.log(validationMixin) // works!
// import the validators from "lib" though, src threw an require-js error for me
import { required, email, minLength } from "vuelidate/lib/validators"