Consent to the use of Personal Data and Cookies

This website needs your consent to use cookies in order to customize ads and content.

If you give us your consent, data may be shared with Google.

TypeError: Cannot read properties of undefined (reading _wrapper)

This problem can happen when you use an event handler in Twig, but forget to add- or place your function in the wrong location in your index.js.

31 views
d

By. Jacob

Edited: 2022-08-13 08:38

I am currently working on a plugin for Shopware's administration back-end, and when I wanted to add a few onLoad things to the root element, I figured I would just try and add them to a function in the computed section of my index.js – this caused the following error:

TypeError: Cannot read properties of undefined (reading '_wrapper') at ar (vue.esm.js:7630:13) at ht (vue.esm.js:2238:7) at Array.sr (vue.esm.js:7643:3) at A (vue.esm.js:6369:60) at vue.esm.js:6248:9 at A (vue.esm.js:6374:29) at vue.esm.js:6248:9 at A (vue.esm.js:6374:29) at vue.esm.js:6248:9 at A (vue.esm.js:6374:29)

Apparently this can happen when you use an @event in twig, and do not add a function to the methods section of your index.js. I now have the following, which solved the problem (note the methods section):

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

import template from './my-custom-page.html.twig';

import './my-custom-page.scss';

Component.register('my-custom-page', {
  inject: ['repositoryFactory'],
  template,

  metaInfo() {
    return {
     // ...
    };
  },
  data() {
    return {
     // ...
    }
  },

  computed: {
     // ...
  },

  methods: {
    mainStart() {
      setTimeout(() => {
        
        console.log('do stuff here');

      }, 1000);
      return true;
    },
  }

})

Interestingly enough, the code in the function was working in spite of being erroneously placed in the computed part rather than adding it in methods. It was something else, and entirely unrelated, that was breaking because of my error, and the obscure error message was the only thing indicating something was wrong. Good luck finding it I guess?

In order to have the function called on the onLoad event, I would simply use @onload on my wrapper element inside my twig file. E.g:

<div class="fe-newsletter-product-selector" @onload="mainStart">
  {# A bunch of more stuff here... #}
</div>

Tip. Functions placed in the methods: { ... } sections will be callable in your twig file with {{ myFunctionName() }}, and similarly so for variables placed in the data() { ... } section. E.g. {{ myVariableName }}

Tell us what you think:

    More in: vuejs