Module not found: Error: Can't resolve 'vuex'

Shopware 6 (English) Programming (EN)
1

Hello

I’m playing arround with creating an administration module, the module is a simple crud system to manage ‘lookbooks’. I’ve managed to get a basic version of it working (eg. list, edit, created, delete, view). Though I wanted te advance a little and add state management to my module (something that the module sw-product-detail does as well).

In my custom plugin I’m trying to import mapState, but am failing to do so. Do we need to include vuex in our custom plugin seperately or is there another way that I’m overlooking?

...
import { mapState } from 'vuex';
import zLookbookDetail from './state';

Component.register('z-lookbook-detail', {
...

  inject: [
    'repositoryFactory',
    'context'
  ],

...

  beforeCreate() {
    this.$store.registerModule('zLookbookDetail', zLookbookDetail);
  },

  created() {
    this.initializeState();
  },

  computed: {
    ...mapState('zLookbookDetail', [
      'repository',
      'isLoading'
    ]),
...
}

Thanks in advance

2

Just included it myself in my plugin (customer / plugins / / src / Resources / administration)

3

Hi Zazoe,

the “Module not found” Error is risen, because Webpack treats your plugin and the aministration core as two different "project"s that can only share exported functionality. So for every library you want to use you must add it as a dependenciy in your package.json and install your dependencies just as you did.

Because we know that installing Vuex on every plugin, just to use mapper functions, is superflous, we expose them through the Component module of the shopware object:

import { Component } from 'src/core/shopware';

/* the object spread is for less typing only
const { mapState } = Component.getComponentHelper();

Component.register('new-component', {
    computed: {
        ...mapState(['state', 'ohterState'])
    }
});

Sorry for letting you wait and i hope this is helpful.

1 „Gefällt mir“
4

Hello @sfranze‍

Thank you kindly for your answer.

I did indeed found it a bit strange that we had to add Vuex as a dependency for each plugin we write. I’ll have a deeper look into the Component module next time!

Still facing some issue’s with this though, I feel my plugin is loaded and compute is filled before the object returned by getComponentHelper is populated. THis results in mapState is not a function (because at this time it’s still undefined).

Thanks for explaining! 

5

H‍ello @Zazoe‍,

You’re right that is a timing issue. I took al look at my implementation and realized that it is really stupid. We want to keep our core logic free from Vue.js dependencies. That means that everything that is related to Vue is set up by initializers rather than importing it statically. As a result, the getComponentHelper() function is only available after the initializers were run.

For our core components, we have solved the problem by delaying their registration into an initializer. see src/app/init/component.init.js