VSCode IntelliSense for NativeScript Cannot Find Module 'ui/frame'

Question

I am new to NativeScript, new to VSCode and new to TypeScript definitions and am experiencing difficulties getting setup for VSCode to perform autocompletion through IntelliSense for modules required from tns-core-modules.

The dependencies from my package.json:

"dependencies": {
    "lodash": "^4.17.4",
    "nativescript-theme-core": "1.0.4",
    "tns-core-modules": "3.2.0"
}

IntelliSense for lodash works perfectly as expected. However, IntelliSense for anything from tns-core-modules does not work.

I created a project from the blank-template in NativeScript's Sidekick. After googling around I added a jsconfig.json as follows:

{
    "compilerOptions": {
        "checkJs": true,
        "target": "ES6",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "app/**/*"
    ]
}

CheckJS shows me this error in home-page.js

Hovering over the error it reads:

[js] Cannot find module 'ui/frame'.

I tried to do various things that I honestly, just don't understand like:

/// <reference path="../../node_modules/tns-core-modules/tns-core-modules.d.ts" />
/// <reference path="../../node_modules/tns-core-modules/ui/frame/frame.d.ts"/>

My understanding is that because "ui/frame" is not in the package.json, but nativeScript intelligently extracts the appropriate module from tns-core-modules based on what platform it's building for...

The big question is: How do you get VSCode to know about the proper mappings and make the connection between ui/frame and the appropriate "frame.d.ts".

Thanks in advance!

EDIT: I wanted to update any readers and let them know that I am not and do not want to write TypeScript code, but I do want VSCode to interpret the typescript definitions properly.

Would prepending tns-core-modules in front of ui/frame work? — pkanev
@pkanev no unfortunately. I tried that and if my understanding of nativescript is right, it wouldn't make sense. Also if you look in frame.d.ts it actually defines the module 'ui/frame'. However, I really don't know typescript. — James Gilchrist
The runtime checks to see if ui/frame is a built-in (tns-core-modules) module, and then proceeds to looking through the installed node_modules. Prepending tns-core-modules would just resolve to node_modules/tns-core-modules, so it's not wrong. — pkanev
@pkanev you are right, it doesn't break (as in the app still works on build) but it still can't find the module because there is no tns-core-modules/ui/frame/frame.js or index.js for npm to know to import automatically. I'm getting frame.js from the package.json in ui/frame as it contains "main": "frame". It's not going to know that it should use frame.ios.js or frame.android.js and it doesn't seem to be picking up the fact that it should use "frame.d.ts" as the types. — James Gilchrist

James Gilchrist James Gilchrist · Accepted Answer · 2017-11-03T16:37:22

0

votes

The answer to this is to use TypeScript. I couldn't get it to work without it.

VSCode IntelliSense for NativeScript Cannot Find Module 'ui/frame'

1 Answers