Electron-vue: Critical dependency: the request of a dependency is an expression

[rafa-acioly]

I'm trying to integrate the woocommerce virtual store module into my project and when I add the mutation "add_product_to_cart" I get the following error.

./~/ajv/lib/async.js
96:20-33 Critical dependency: the request of a dependency is an expression

The vue module:

<template>
  <div class="field has-addons">
    <p class="control is-expanded">
      <input class="input is-medium" type="text" placeholder="Código do produto" v-model="productCode">
    </p>
    <p class="control">
      <button  class="button is-info is-medium" @click="findProduct">
        Adicionar
      </button>
    </p>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        productCode: ''
      }
    },
    methods: {
      findProduct () {
        this.$store.commit('ADD_PRODUCT_TO_CART', this.productCode)
      }
    },
    name: 'find-product'
  }
</script>

The state/mutation module:

import * as types from '../mutation-types'
import Woo from 'woocommerce-api'

const wc = new Woo({
  url: 'http://wc-project.dev',
  consumerKey: 'ck_**',
  consumerSecret: 'cs_**',
  version: 'wc/v1',
  wpAPI: true
})

const state = {
  products: []
}

const mutations = {
  [types.ADD_PRODUCT_TO_CART] (state, payload) {
    console.log(payload)
    wc.get(`products/${payload}`, (err, data, res) => {
      if (err) return console.log(err)
      return console.log(res)
    })
  }
}

export default {
  state,
  mutations
}

Please ignore all this console.log, if i use only 1 console.log with console.log(payload) works fine.

• Node version: v7.8.0
• NPM version: 4.5.0
• vue-cli version: 2.8.1
• Operating System: Lubuntu (32bits)

[SimulatedGREG]

@rafa-acioly

This appears to be an asynchronous issue. Vuex mutations are meant to be synchronous and will not wait around for asynchronous tasks like wc.get. It would be best to move this functionality to a vuex action (called by $dispatch) and then have the action call the mutation once the data is available. This isn't a direct issue with electron-vue so I will be closing this. Feel free to comment back any other questions.

[rafa-acioly]

Hi @SimulatedGREG
Thanks for the reply and I'm sorry if you're causing any discomfort, but could you give some examples of the implementation you suggested?

[melquic]

Hi @rafa-acioly did you solve this issue? I'm facing the same problem when I try to call an asyncrounous operation inside a vuex action.

[rafa-acioly]

@melquic No, I still have this problem even after using an asynchronous method within an action.

[melquic]

@SimulatedGREG
Don't you think maybe this is about webpack not managing some dependencies in order to the async code to work?

[melquic]

Guys, I think I have found the problem. The npm modules I was using to call my external API wasn't installed in the /app/package.json. I had installed them only in the root directory /package.json. They need to be there in order to be found during the building process.
@rafa-acioly please, see if this is your scenario as well.

[rafa-acioly]

I'll check and respond after the test, thank you! @melquic

[SimulatedGREG]

As a general notice, make sure to check out #171 if you haven't seen it. electron-vue will soon be moving to a single package.json structure so these small complications should be more minimized.