Error on "yarn watch"

[rchl]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: macOS
• Vetur version: 0.29.0
• VS Code version: -

Problem

Trying to run yarn watch in the latest repo gives an error:

yarn run v1.22.5
warning ../package.json: No license field
warning vetur@0.29.0: The engine "vscode" appears to be invalid.
$ run-s compile copy:snippets watch:build
warning ../package.json: No license field
warning vetur@0.29.0: The engine "vscode" appears to be invalid.
$ run-s compile:source copy:snippets
warning ../package.json: No license field
warning vetur@0.29.0: The engine "vscode" appears to be invalid.
$ tsc -b .
vti/node_modules/vls/dist/services/dependencyService.d.ts:18:46 - error TS7016: Could not find a declaration file for module 'eslint'. '/Users//vetur/vti/node_modules/vls/node_modules/eslint/lib/api.js' implicitly has an 'any' type.
  Try `npm install @types/eslint` if it exists or add a new declaration (.d.ts) file containing `declare module 'eslint';`

18 export declare type T_ESLint = typeof import('eslint');
                                                ~~~~~~~~

vti/node_modules/vls/dist/services/dependencyService.d.ts:19:55 - error TS7016: Could not find a declaration file for module 'eslint-plugin-vue'. '/Users//vetur/vti/node_modules/vls/node_modules/eslint-plugin-vue/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/eslint-plugin-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'eslint-plugin-vue';`

19 export declare type T_ESLintPluginVue = typeof import('eslint-plugin-vue');
                                                         ~~~~~~~~~~~~~~~~~~~

vti/node_modules/vls/dist/services/dependencyService.d.ts:20:50 - error TS7016: Could not find a declaration file for module 'js-beautify'. '/Users//vetur/vti/node_modules/js-beautify/js/index.js' implicitly has an 'any' type.
  Try `npm install @types/js-beautify` if it exists or add a new declaration (.d.ts) file containing `declare module 'js-beautify';`

20 export declare type T_JSBeautify = typeof import('js-beautify');
                                                    ~~~~~~~~~~~~~

vti/node_modules/vls/dist/services/dependencyService.d.ts:21:48 - error TS7016: Could not find a declaration file for module 'prettier'. '/Users//vetur/vti/node_modules/vls/node_modules/prettier/index.js' implicitly has an 'any' type.
  Try `npm install @types/prettier` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier';`

21 export declare type T_Prettier = typeof import('prettier');
                                                  ~~~~~~~~~~


Found 4 errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "compile:source" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "compile" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproducible Case

1. Close vetur repo
2. Checkout latest master (currently at 1851d1c)
3. Run yarn && yarn watch

[yoyo930021]

Temporary Solution:

//  vti/src/typing.d.ts
declare module 'eslint-plugin-vue';
declare module 'eslint';
declare module 'js-beautify';
declare module 'prettier';

I'm not sure how to fix it. @@

[rchl]

I only really care about the server part and I can run yarn watch in /server without problems.

Another workaround would be to install those @types/* dependencies in the root package.json I guess.

[rchl]

I did a mix of the two in #2437

[yoyo930021]

I only really care about the server part and I can run yarn watch in /server without problems.

Another workaround would be to install those @types/* dependencies in the root package.json I guess.

I think the correct answer is that vls must contain these definitions

[rchl]

Types don't exist for eslint-plugin-vue so we need the work-around for those.

The other ones have type declarations and those declarations are already included in respective directories (/server or /vti). It's only when building from the root directory it is failing. And I'm not quite sure why is that but I think the workaround should be acceptable for now. I saw that you are refactoring the building step anyway.

[yoyo930021]

Types don't exist for eslint-plugin-vue so we need the work-around for those.

The other ones have type declarations and those declarations are already included in respective directories (/server or /vti). It's only when building from the root directory it is failing. And I'm not quite sure why is that but I think the workaround should be acceptable for now. I saw that you are refactoring the building step anyway.

The unreasonable point is that everyone who uses vls must do same thing.
So it's correct to vls be the one that contains them.

[rchl]

vls doesn't have a public interface, it can only be used by running /bin/vls and it's not really meant for programmatic use, as far as I can see. So not sure how those internal develop types are relevant for published vls package.

[yoyo930021]

vls doesn't have a public interface, it can only be used by running /bin/vls and it's not really meant for programmatic use, as far as I can see. So not sure how those internal develop types are relevant for published vls package.

It actually works just like the commonjs library.
https://github.com/vuejs/vetur/blob/master/server/package.json#L7

It same as vscode-css-languageservice.
https://github.com/microsoft/vscode-css-languageservice/blob/master/package.json
So we can use it in vetur.

[rchl]

I see.

In any case, using vls as dependency means that the consumer doesn't have to care about any types because it's already compiled and generated types are included. And besides, the consumer only cares about types of the VLS interface and not about types of eslint or other stuff.

So I'm not sure whether your comments are suggesting to try a different approach or whether you are agreeing with my solution.

[yoyo930021]

I'm not sure what the right answer is yet.

All I can think of now is...

1. rename server/src/typings.d.ts to server/src/typings.ts
2. add import './typings' in server/src/main.ts
3. move @types/eslint , @types/prettier, js-beautify to dependencies in package.json
4. The problem will resolve in next version in vls. so we need to use temporary solution.

Maybe the final solution is bundled .d.ts file in vls.

[octref]

I agree with @yoyo930021 that we shouldn't make those packages devDeps on the top level. I also think you shouldn't need to install extra typings when using vls as a dependency.

Let's first make the CI green. I'll open another issue to track VLS typing issue.

[rchl]

When using vls as a dependency you don't need any extra dependencies. Where is that confusion coming from?

You only interact with vls through its public interface (the VLS class). Everything is compiled to JS and types are generated at build time.

[octref]

When using vls as a dependency you don't need any extra dependencies. Where is that confusion coming from?

Isn't the current issue that vti depends on vls and doesn't have all necessary typing to compile it?

So I'm suggesting that we:

• First just use the temp solution of adding declare module for all missing ones.
• Later we bundle VLS with the types and publish it together with VLS types.

[octref]

Let's keep this open to fully fix it.