PhpStorm warns about Object methods in Vue component when using TypeScript

Question

When creating Vue components using TypeScript (via the lang="ts" attribute of the script tag), PhpStorm (version 2021.2.2) shows a warning about any methods of the native JavaScript Object as "Unresolved function or method", e.g.:

<template>
  ...
</template>

<script lang="ts">
const v = Object.values({ a: 'a', b: 'b' });
</script>

Results in:

How can PhpStorm (or WebStorm) be configured to recognise Object as the native JS ES6+ Object?

(For reference, Cmd + clicking on Object jumps to lib.es5.d.ts so it's assuming the wrong version of JavaScript. However, under Languages & Frameworks > JavasScript, the version is already set to ECMAScript 6+)

Take a look at this github issue which mentions your exact problem The script lang=ts showing misleading errors in .vue files — Ruan Mendes
– Ruan Mendes, Commented Sep 23, 2021 at 13:09
Are you not getting errors when compiling? Is the problem only with the IDE? What are your options under "More actions..." in your screenshot. — Ruan Mendes
– Ruan Mendes, Commented Sep 23, 2021 at 13:16
@JuanMendes - the github issue seems to be a little different, as it's talking about problems with references on the vue instance, rather a generic JS version mismatch in the IDE. Re. errors when compiling - no, there are no errors, and the code executes fine. It's just the IDE that's at fault. — coatesap
– coatesap, Commented Sep 23, 2021 at 13:23
If your typescript configuration is wrong (and it seems that it is), compiler will show errors as well. Did you try enabling the compiler service in Settings | Languages & Frameworks | TypeScript, BTW? — lena
– lena, Commented Sep 24, 2021 at 11:35
@lena - yes, Typescript language service is enabled. The compiler does not show any errors - it's purely the IDE that highlights it as a problem. — coatesap
– coatesap, Commented Oct 19, 2021 at 8:48

lena · Accepted Answer · 2021-09-24 11:32:51Z

1

Object.values() is part of ES2017. Make sure to either set "target" to "esnext" or add "esnext" to "lib": [] in tsconfig.json

edited Sep 24, 2021 at 11:32

answered Sep 23, 2021 at 12:07

lena

94.4k11 gold badges154 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

coatesap Over a year ago

I'm getting the problematic behaviour on 2021.2.2 - so it must be a configuration issue...

coatesap Over a year ago

I've added a better screenshot and the exact error message wording now.

Ruan Mendes Over a year ago

"Works for me" is not really an answer, is it?

lena Over a year ago

ctrl+click on Object - where does it jump to?

coatesap Over a year ago

@lena - It jumps to lib.es5.d.ts so it's obviously assuming that version of JS for some reason.

|

Collectives™ on Stack Overflow

PhpStorm warns about Object methods in Vue component when using TypeScript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related