Skip to content

Possible conflict with vscode-eslint when using ...mapGetters/...mapActions #436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
lbssousa opened this issue Mar 19, 2018 · 1 comment · Fixed by #465
Closed

Possible conflict with vscode-eslint when using ...mapGetters/...mapActions #436

lbssousa opened this issue Mar 19, 2018 · 1 comment · Fixed by #465
Assignees
Labels

Comments

@lbssousa
Copy link

Tell us about your environment

  • ESLint Version: 4.15.0
  • eslint-plugin-vue Version: 4.0.0
  • vscode-eslint extension Version: 1.4.7
  • Node Version: 8.10.0

Please show your full configuration:

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/strongly-recommended',
    'prettier',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  globals: {
    ga: true, // Google Analytics
    cordova: true,
    __statics: true
  },
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',

    // allow paren-less arrow functions
    'arrow-parens': 0,
    'one-var': 0,

    'import/first': 0,
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
    'import/extensions': 0,
    'import/no-unresolved': 0,
    'import/no-extraneous-dependencies': 0,

    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

What did you do? Please include the actual source code causing the issue.
First of all, I'm not sure if this is a problem with eslint-plugin-vue or with vscode-eslint extension.

I have some Vue components where I map Vuex getters&actions to computed properties, like this example:

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    foo: {
      ...mapGetters({ get: 'getFoo' }),
      ...mapActions({ set: 'setFoo' })
    }
  }
}
</script>

However, vscode-eslint throws several exceptions when I write computed properties based on such mappings.

What did you expect to happen?
I expect that vscode-eslint can lint my code successfully

What actually happened? Please include the actual, raw output from ESLint.
I've got the following exception from vscode-eslint:

[Error - 10:56:24] ESLint stack trace:
[Error - 10:56:24] TypeError: Cannot read property 'type' of undefined
    at cp.value.properties.filter.p (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint-plugin-vue/lib/utils/index.js:347:20)
    at Array.filter (native)
    at computedPropertiesNode.value.properties.filter.map.cp (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint-plugin-vue/lib/utils/index.js:346:14)
    at Array.map (native)
    at Object.getComputedProperties (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint-plugin-vue/lib/utils/index.js:338:8)
    at Object.assign.utils.executeOnVue (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint-plugin-vue/lib/rules/no-async-in-computed-properties.js:118:40)
    at ExportDefaultDeclaration:exit (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint-plugin-vue/lib/utils/index.js:467:9)
    at listeners.(anonymous function).forEach.listener (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint/lib/util/safe-emitter.js:47:58)
    at Array.forEach (native)
    at Object.emit (/home/laercio/Documentos/GitLab/pte-mogidascruzes/mae-electron-quasar/node_modules/eslint/lib/util/safe-emitter.js:47:38)

Possible workaround
With this workaround, vscode-eslint stops throwing the exceptions above and lints my code successfully.

<script>
import { mapActions, mapGetters } from 'vuex'

const compProps = {
  foo: {
    ...mapGetters({ get: 'foo' }),
    ...mapActions({ set: 'foo' })
  }
}

export default {
  computed: {
    ...compProps
  }
}
</script>
@michalsnik
Copy link
Member

Interesting pattern :D I didn't thought of this case before and we're probably missing one additional check to prevent this error from happening. Thanks for posting this issue @lbssousa :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants