Vue-cli: Use of promisify breaks compatibility with vscode eslint @vue/airbnb

[thomasmichaelwallace]

Version

3.0.0-beta.15

Reproduction link

https://codesandbox.io/s/vue

Steps to reproduce

Create a sample Vue project.
Ensure eslint config includes: { "extends": [
"plugin:vue/recommended",
"@vue/airbnb"
] }
Open project in VS Code with eslint plugin.
Open "Home.vue" file, wait for errors to come.

What is expected?

No error in "Problems" tab.

What is actually happening?

Resolve error: require(...).promisify is not a function (import/no-unresolved)
Resolve error: require(...).promisify is not a function (import/no-extraneous-dependencies)
Resolve error: require(...).promisify is not a function (import/no-duplicates)
Resolve error: require(...).promisify is not a function (import/extensions)
Resolve error: require(...).promisify is not a function (import/no-named-as-default)
Resolve error: require(...).promisify is not a function (import/no-named-as-default-member)
Unable to resolve path to module '@/components/HelloWorld.vue'. (import/no-unresolved)

---

Why This Happens

• VSCode uses electron 1.7.12: (ref: https://github.com/Microsoft/vscode/blob/aaa191d9a2d893a7d42b6e2233430c5fe5064d9e/.yarnrc)
• Which uses node 7.9 (ref: https://electronjs.org/releases#1.8.1)
• util.promisify is not available in Node 7.9 (ref: https://nodejs.org/docs/latest-v7.x/api/util.html)
• But it _is_ used in this line: (https://github.com/vuejs/vue-cli/blob/cd88b47edcc102903e787d55b238a7f5e9e1c900/packages/%40vue/cli-shared-utils/index.js#L17)
• The above line is imported by the following route:

1. eslintrc imports: @vue/airbnb
2. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/eslint-config-airbnb/index.js#L8
3. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/webpack.config.js#L7
4. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js#L11
5. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-shared-utils/index.js

[thomasmichaelwallace]

n.b. for those hitting this bug, deleting the offending `.promisfy' doesn't seem to cause any adverse effects with an existing project- which allows you to continue linting from within vscode.

[sebj54]

Ensure eslint config includes: { "extends": [
"plugin:vue/recommended",
""
] }

Mine extends 'plugin:vue/essential' and I get the issue too. I also extends '@vue/airbnb'.

[yyx990803]

As I said:

1. I can't reproduce this with the latest VSCode (1.23.1) + VSCode ESLint plugin (1.4.12) + the exact project setup (@vue/airbnb) you described. Everything works as expected for me. Please make sure to update everything to the latest.

2. Your ESLint plugin is linting files that are not even part of your project source code. The files containing util.promisify is inside your dependency, and your ESLint plugin is attempting to lint a dependency which is obviously wrong. This has nothing to do with what version of Node VSCode is using and there's nothing Vue CLI can do about it - this is a problem with your editor/plugin setup. If anything, please report a bug to the VSCode ESLint plugin.

[thomasmichaelwallace]

@yyx990803 it's not trying to lint the dependency- look at the chain I've shown you above- it's that the loading of the webpack configuration causes the promisify to come up.

[thomasmichaelwallace]

It happens with dbaeumer.vscode-eslint 1.4.12 + vscode-insiders 1.24.0 (f67e6397855fb25becbdf33df185f96da7fdd108) +

    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "@vue/eslint-config-airbnb": "^3.0.0-beta.15",
    "@vue/test-utils": "^1.0.0-beta.16", 

[thomasmichaelwallace]

For the error to occur you _must_ go to a file that includes an import @/ so that the webpack-resolver kicks in.

[yyx990803]

Your description was missing the @/ import bits - this is exactly why we require you to provide an actual reproduction.

[thomasmichaelwallace]

I'm glad that you can now reproduce it and I'm sorry I had not noticed that specific not included in @sebj54's case.

As some feedback though- aggressively closing the issue makes it look like there's no future discussion (hence me raising a second issue), and not having an issue to work against means that instead of putting together a PR to try and resolve this problem I've instead focused all my time trying to get it acknowledged. This isn't the first time I've been put off contributing to this project (#947).

[Akryum]

As some feedback though- aggressively closing the issue makes it look like there's no future discussion (hence me raising a second issue), and not having an issue to work against means that instead of putting together a PR to try and resolve this problem I've instead focused all my time trying to get it acknowledged. This isn't the first time I've been put off contributing to this project (#947).

Maybe next time you could follow the issue requirements (that by the way we clearly indicate) and post a link to an actual runnable reproduction of your problem, and then less time will be wasted. 🐈

[thomasmichaelwallace]

OK. Thanks for the feedback.

[sebj54]

Your description was missing the @/ import bits - this is exactly why we require you to provide an actual reproduction.

WTF? There was an actual case reproduction in my issue. It is clearly written:

Open "Home.vue" file, wait for errors to come.

And actually, there is the @/ import bit in this file...
So please, don't tell there was missing a repro scenario and admit you read our issues too fast. How can we provide a simpler reproduction scenario than creating a demo project and open just a single file in VS Code?

So, @yyx990803, this is exactly why I provided an actual reproduction.

[yyx990803]

@sebj54 that was not directed at you. I did read your issue too fast.

[yyx990803]

@sebj54 I just re-read your issue. No, you didn't provide an actual reproduction.

• The CodeSandbox link links to an outdated Vue 2.x template project.
• You didn't list any prompts you chose when creating the project. The Home.vue is only present when you choose the router.
• It did not mention it only happens with the @/ imports.

You issue actually provided less information than this one.

[sebj54]

@yyx990803 You're right, my bad...
All my apologies, I'll pay more attention at my repro scenarios next times.

I understand that you don't have to lose too much time recreating the context of the issues, but you know your projects very well and it can be very hard for us (users) to figure out what we did wrong.
Plus, the "closed" aspect of your message made me think the issue wasn't taken seriously while the problem was actually my scenario. Maybe it would have been different with an open end to your message like "please add details to your scenario in a new issue".

I'm not blaming you here, just trying to explain what happened and maybe enhance your issues.

Thanks for having taken your time to explain what was wrong in my issue. 🙏