8000 vue/no-lifecycle-after-await: dosen't work with unplugin-auto-import · Issue #2050 · vuejs/eslint-plugin-vue · GitHub
[go: up one dir, main page]
Skip to content

vue/no-lifecycle-after-await: dosen't work with unplugin-auto-import #2050

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.

Sign up for GitHub

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

8000 Jump to bottom
Closed
2 tasks done
basil-gor opened this issue Dec 1, 2022 · 1 comment
Closed
2 tasks done

vue/no-lifecycle-after-await: dosen't work with unplugin-auto-import #2050

basil-gor opened this issue Dec 1, 2022 · 1 comment

Comments

@basil-gor
Copy link

Checklist

  • I have tried restarting my IDE and the issue persists.
  • I have read the FAQ and my problem is not listed.

Tell us about your environment

  • ESLint version: ^8.28.0
  • eslint-plugin-vue version: ^9.8.0
  • Node version: 16.13.1
  • Operating System: macOS 13.0.1

Please show your full configuration:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    './.eslintrc-auto-import.json',
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    "vue/no-unused-properties": ["error", {
      "groups": ["props", "setup"]
    }]
  }
}

What did you do?

<script lang="ts">
// import { onMounted } from 'vue';

const asyncFunction = async () => {
  // some async logic
}

export default defineComponent({
  async setup() {

    await asyncFunction();

    onMounted(() => {
      // some hook logic
    });
  }
})
</script>

What did you expect to happen?

In normal case, if I import hook in setup, I get eslint error.
image

What actually happened?

If I import hook using unplugin-auto-import, I don't get an eslint error.
image
And in browser console I get

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
at <App>

Repository to reproduce this issue
https://github.com/basil-gor/eslint-vue-lifecycle-after-await-example
@ota-meshi
Copy link
Member

Thank you for posting the issue.
This plugin has no way of determining if the user is autoimporting onMounted.
So not checking unknown onMounted is the intentional behavior of this rule.
Either you turn off the rule or import onMounted explicitly.

@FloEdelmann FloEdelmann mentioned this issue Nov 21, 2023
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ota-meshi @basil-gor
0