What is the solution to the error message "A TypeError was encountered in the current module: e.parse is not a function"?

Can someone please help me resolve this Vue Js error I am encountering in Shopware 6 Administration? The issue pertains to selecting a column in the database table using a module.

Note: Below is the complete code snippet. I am attempting to retrieve data from the database and display it in the twig template.

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
import template from './store-settings-page.html.twig'
Component.register('store-settings-page', {
template,

inject: [
 'repositoryFactory'
 ],

metaInfo() {
   return {
       title: this.$createTitle()
   };
 },

data: function () {

 return {
     entity: undefined,
     storeData: null,
     entityId: '4e2891496c4e4587a3a7efe587fc8c80',
     secret_key: 'hdkkjjsmk538dncbjmns',
     public_key: '1destinoDet2123lefmoddfk@#$$%O',
 }

},

computed: {

 storeKeysRepository() {
     return this.repositoryFactory.create('store_keys');
 },
 
},

created() {


     this.storeKeysRepository
         .get(this.entityId, Shopware.Context.api)
         .then(entity => {
             this.entity = entity;
         });

         console.log(entity);
 },
 

});


Answer №1

Sorry if my understanding of Vue and JS is not quite accurate, but from what I can gather from Shopware codes, I suggest structuring data in the following manner:

data() {
        return {
            ...
        };
}

I would also recommend simplifying your file to its essential components to troubleshoot the error.

Additionally, make sure to verify whether you are working with a JS or TS file. It's possible that the parsing issue arises because you are extending store-settings-page and it is expecting TypeScript.

Answer №2

this.accessRepository
         .fetch(this.uid, Shopware.Context.api)
         .then(data => {
             this.data = data;
             console.log(this.data);
         });

Just what you need

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS offers a mixin that is accessible worldwide

I'm looking to create a global mixin that is accessible everywhere, but not automatically inserted into every component. I don't want to use Vue.mixin({...}); Following the guidelines from this source, I have structured my project accordingly. Y ...

v-tooltip specifically designed for the append-icon

I'm currently working with Vuetify and facing an issue with applying a tooltip only for the append-icon in a v-text-field. The current problem is that the tooltip does not work for icons at all! View code on CodePen <v-tooltip bottom> < ...

Access the id of an object in an array using Vue.js

Is there a way to showcase value data depending on the index array? I have created a modal for editing data, with a JSON structure like this: [ { "ID": 3, "idusers": 3, "skills": "Go", ...

Without specifying an element, the Vue3 Composition API PerfectScrollbar Plugin cannot be initialized

I'm currently facing an issue while developing a Vue3 Perfect Scrollbar plugin. The problem arises when I try to initialize the object, resulting in the following error: Error: no element is specified to initialize PerfectScrollbar The code for the ...

Trouble with Vue select not linking to the model

I am working with a basic select element in VueJS: <select v-model="country" class="dropdown-input"> <option v-for="c in countries" v-bind:key="c.CountryCode" v-bind:value="c.CountryCode&q ...

Utilize the same Apollo GraphQL query definition across various Vue components for different properties

On my vue screen, I am trying to utilize a single apollo graphql query that I have defined for two different properties. From what I understand, the property name must correspond with an attribute name in the returned json structure. I attempted to use the ...

Unlocking the Power of Mixpanel within Nuxt.js

Is it possible to integrate Mixpanel analytics into Nuxt.js? Although I am new to Nuxt.js, Vue, and Mixpanel, the website I have inherited is performing well so I prefer to learn how to incorporate Mixpanel rather than make drastic changes. Adding Google ...

How can you replace the global event handler within a nested Vue component, and then access the original handler later on?

I am currently developing with Vue and using VueRouter, Vuex, and VueWebsocket in my application. The main component of the app is called App, which contains all other components. I have a websocket event that is globally set up like this: this.$options ...

Leverage the properties from a slot in Vue to use as local component data

Hello, I am currently using a layout that contains a slot where I render my pages. The layout fetches some data when rendered and passes it to the slot as props. While I can easily access the props within the template, I'm unable to use it as local da ...

Implementing dynamic components in Vuejs by passing props from objects

I have developed a dashboard application that allows users to customize their dashboard by adding widgets in any order. While the functionality is working fine, I am looking to address some technical debt and clean up the code. Let's simplify things ...

Why is my Vue/MySQL Database not showing up online, even though it is accessible locally?

While my application runs smoothly locally, I encounter an issue when deploying to the Heroku server. The page contents linked to the MySQL Database fail to display without any CORS errors or fetch call issues in Chrome Dev Tools. The page loads, but remai ...

Vitek - Uncaught ReferenceError: Document Is Not Defined

Why am I encountering an error when trying to use File in my vitest code, even though I can typically use it anywhere else? How can I fix this issue? This is the content of my vite.config.ts. /// <reference types="vitest" /> import { defin ...

Testing Vuex getters with unit tests in Vue

In my component, I have a getter called defaultInternalAccountId that I am watching for changes. Whenever this property changes, the method fetchAccount is called. This method is also triggered when the component is mounted. My goal is to write a test that ...

Arranging text in alignment on a single line with Vuetify

I am attempting to format text in a way that it is aligned with part on the left side of the card and the other part on the right (with space between them). However, when using class="text-right", the text gets moved down. Does anyone have any ideas on h ...

What is the best way to uninstall the Google Translation Plugin when transitioning to a new Vue component?

I'm facing a minor issue as I develop a website builder. It consists of two main parts: the builder and the preview section. Within the preview, I've included the Google Translation plugin: onMounted(() => { new google.translate.TranslateEle ...

"Utilizing Axios to convey JSON data into Vue Js: A Step-by-Step Guide

After saving my JSON data in a JS file for Vue, I encountered an issue with accessing it and getting my HTML v-for condition to work properly. The method described in the Vue.js documentation didn't help me fetch and execute the JSON data. Could someo ...

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

I am working with a list of string values that represent the identifiers of fields I need to add to a class. For instance: Consider the following string array: let stringArr = ['player1score', 'player2score', 'player3score' ...

Accessing a precise div element in a webpage

Currently, I am utilizing Vue.js and Nuxt for my web development. One issue I am facing is related to anchors. Specifically, when I navigate to mysite.com/page1#section1, I want the page to scroll to section1. In my code, I have the following snippet: < ...

Retrieve information stored in a component's data variable

After creating a Vue repository using vue init webpack my-app My main.js file looks like this -- // The Vue build version to load with the import command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue fro ...

Fetching an image from Firebase Storage for integration into a Vue application

I am encountering an issue while trying to fetch an image from my firebase storage to display it in my Vue application. The upload process from the app to firebase storage runs smoothly, but there is an error during retrieval. My setup involves using the F ...