ERROR: Vuex handler functions must not be anonymous. handler.name in IE and Safari is undefined

[goors]

I followed you example (withModules) and app is not working at all in IE and Safari. I am getting error: Vuex handler functions must not be anonymous. Vuex needs a key by which it identifies a handler. If you define handler as class member you must decorate it with @Handler.

Now my code is this (some of it):

export const search_ = {
namespaced: true,
  getters: {
    searchedAddress: (state: State) => {
      return state.searchedAddress;
    }
  },
  mutations: {
    searchingFor (state: State, address: Address) {
      state.searchedAddress = address;
    },
    resetState: (s: State) => {
      const initial = state;
      Object.keys(initial).forEach(key => { s[key] = initial[key]; });
    },
  }
}

const { commit, read, dispatch } =
  getStoreAccessors<State, any>("search_");
const getters = search_.getters;
export const getSearchedAddress = read(getters.searchedAddress);

When i console log your stuff in this function:

function qualifyKey(handler, namespace) {
  console.log(namespace)
  console.log(handler)
  console.log(handler.name)
  console.log(handler._vuexKey)
    var key = handler.name || handler._vuexKey;
    if (!key) {
        throw new Error("Vuex handler functions must not be anonymous. "
            + "Vuex needs a key by which it identifies a handler. "
            + "If you define handler as class member you must decorate it with @Handler.");
    }
    return namespace
        ? namespace + "/" + key
        : key;
}

I am getting in IE and Safari for Windows:

1. search_ // this is namespace
2. function as string // this is ahndler
3. undefined // this is handler name (but should be mutation name)
4. undefined // this is handler._vuexKey

I would really appreciate if you can help with this because this is a project that i have been working on for three months and going back to old style vuex is just not and option for me at this momment.

[super2ni]

Hello,

I dont know if it can help you but the only way I found to make this working was using class methods as VueX handlers and the @Handler decorator.

Check this example: https://github.com/istrib/vuex-typescript/blob/master/src/tests/withModules/store/system/system.ts

[AleksueiR]

Maybe this can be helpful: https://github.com/istrib/vuex-typescript/issues/13

[goors]

sorry for late response. i will try @handler decorator.

[goors]

I have tried with @Handler as well but i am getting same error in IE11

[dinhtq]

Did you ever figure out the issue? I am getting the same error after I build my vue app. The error occurs in Chrome for me. @goors

[goors]

@dinhtq no. i kind of give up on this. we dont support IE 11 :)

[jackkoppa]

Hi @dinhtq - we do support IE 11, and I can paste in the helper function that we're using for each store module, to add a _vuexKey for each handler method. Will do that when I'm on my laptop shortly

[trun222]

Hi @dinhtq - we do support IE 11, and I can paste in the helper function that we're using for each store module, to add a _vuexKey for each handler method. Will do that when I'm on my laptop shortly

@jackkoppa Could you please post that? I am encountering the same issue when building for production. I am using

"vuex": "^3.1.2",
"vuex-typescript": "^3.0.2",
"webpack": "^4.41.4",

[jackkoppa]

For sure, @trun222. Thanks for the reminder; I had totally forgotten about that comment of mine. Given that this project hasn't had updates in a little while, we've actually started maintaining a fork, with this fix & a couple others:

https://github.com/jackkoppa/typesafe-vuex

You can just drop it in as a replacement; still works the same as vuex-typescript

For this issue in particular, you'll use the helper we provide for Vue CLI projects, to preserve function names when minifying. Import described here

(note: you can also just copy the source of that helper for use in vue.config.js, and continue using vuex-typescript; should resolve your issue)

[trun222]

I appreciate your response. How would I apply the fix you mentioned for a custom webpack configuration?

On Sat, Dec 21, 2019 at 12:18 PM Jack Koppa notifications@github.com wrote:

For sure, @trun222 https://github.com/trun222. Given that this project hasn't had updates in a little while, we've actually started maintaining a fork, with this fix & a couple others:

https://github.com/jackkoppa/typesafe-vuex

You can just drop it in as a replacement; still works the same as vuex-typescript

For this issue in particular, you'll use the helper we provide for Vue CLI projects, to preserve function names when minifying. Import described here: https://github.com/jackkoppa/typesafe-vuex/blob/master/README.md#vue-cli

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/istrib/vuex-typescript/issues/17?email_source=notifications&email_token=AB3H6KNLQ4PZIPYLOR5DVCDQZZFWFA5CNFSM4FC2GXRKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHO774A#issuecomment-568197104, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB3H6KLHSHKTDNE2JP65CVTQZZFWFANCNFSM4FC2GXRA .

-- Thank you for your time and consideration,

Thomas R. Underwood II (502)-468-1308

[jackkoppa]

Probably one of two ways, @trun222.

1. If you're already configuring terser in your Webpack configuration, just adjust withkeep_fnames: true, to preserve function names. See docs here

2. If something else is configuring terser for you, you can use that helper method, which takes in a current Webpack config, and tacks on the necessary terser settings. You'd use it something like this:

// webpack.config.js
const { preserveFunctionNamesWithTerser } = require('typesafe-vuex/helpers')

const config = {
  // normal Webpack config, that you'd usually define directly in `module.exports`
}

// add necessary terser settings
preserveFunctionNamesWithTerser(config)

// export config, with adjusted properties
module.exports = config