Unresolved variable string about prop-types

[chenop]

Webstorm 2019.2

1. Settings --> Languages & Frameworks --> JavaScript --> Libraries
2. Download --> search for "prop-types" --> Download and Install --> Ok

[thebuilder]

https://youtrack.jetbrains.com/issue/WEB-26418

[codebymikey]

Based on the issue liked by @thebuilder, this should be fixed in Webstorm 2017.1.3.

[lashae]

@thebuilder I installed the package you referenced, invalidated Webstorm cache and restarted however issue still remains.

[gaearon]

Thanks for raising! Closing as this is not actionable for us, but glad you filed the issue with WS.

Same. Holy shit.

[Odrin]

Yep, same here. Very annoying.

[MichaelDeBoey]

Not sure if this is a problem of the module or it's a problem of Webstorm (some config) itself?

[thebuilder]

Adding the TypeScript d.ts files to a project usually helps with code completion in WebStorm. Check out DefinitelyTyped. Adding the React package was the only way i could get React code completion (and React.PropTypes) to work.

A prop-types package has just been added, try it! https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/prop-types/

[thebuilder]

@lashae Yeah, tried it myself. Seems WebStorm can't make the connection between it and the prop-types module. I'm no TypeScript expert, so not sure what the correct way of setting up a package like this is.

I did manage to partially fix it by wrapping the interfaces in a typescript module. This removes the WebStorm warning, but doesn't provide the code hinting.

prop-types.d.ts

declare module "prop-types" {
  interface Validator<T> {
    (object: T, key: string, componentName: string, ...rest: any[]): Error | null;
  }

  interface Requireable<T> extends Validator<T> {
    isRequired: Validator<T>;
  }

  type ValidationMap<T> = { [K in keyof T]?: Validator<T> };

  interface PropTypes {
    string: Requireable<any>;
    any: Requireable<any>;
    array: Requireable<any>;
    bool: Requireable<any>;
    func: Requireable<any>;
    number: Requireable<any>;
    object: Requireable<any>;
    string: Requireable<any>;
    node: Requireable<any>;
    element: Requireable<any>;
    instanceOf(expectedClass: {}): Requireable<any>;
    oneOf(types: any[]): Requireable<any>;
    oneOfType(types: Validator<any>[]): Requireable<any>;
    arrayOf(type: Validator<any>): Requireable<any>;
    objectOf(type: Validator<any>): Requireable<any>;
    shape(type: ValidationMap<any>): Requireable<any>;
  }
}

I'm guessing the actual problem with code completion is due to the way the React packages are distibuted - Maybe WebStorm can't handle the dev/production env switches

[lashae]

@thebuilder What do you think the best thing to do is now? Should we open an issue on Webstorm issue tracker or try to reach someone (preferable a contributer) at least to verify that this issue is due to prop-types project?