Intellisense, navigation (ctrl+click) stops working for react-native projects

[dbaeumer]

From @miqmago on April 30, 2016 11:15

• VSCode Version: 1.1.0-insider
• OS Version: 10.10.5

In a react-native project, in this issue facebook/react-native#3099 (comment) it is suggested to follow this steps in order to avoid ../../../../.. paths in requires:

package.json:

{
  "name": "@whatever"
}

(or without @ it works too)
Then in your files you can load a package like this:

import MyComponent from '@whatever/components/myComponent';

The problem with this is that navigation (ctrl+click), intellisense, etc. stops working

Copied from original issue: microsoft/vscode#6015

[basarat]

package.json / name is not supported at the moment. That said one can use baseUrl : '.' and paths: : #5039 (comment)

I haven't looked at baseUrl / paths myself yet. Will try and write up sometime simple (but incomplete) for the TypeScript deep dive 🌹

[mhegazy]

As @basarat noted, baseUrl and paths would be the best way to handle this. so your tsconfig.json would look like:

{
    "compilerOptions": {
        "paths": {   "@whatever/*" : [ "node_modules/components/*" ]  }
    }
}

Documentation for paths is available at: https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#base-url

[basarat]

I might be wrong, but from #5039 I read paths can only be used if baseUrl is set So maybe all examples showing paths should also show baseUrl 🌹

[mhegazy]

sorry about that.

{
    "compilerOptions": {
        "baseUrl" :  "./",
        "paths": { "@whatever/*": [ "node_modules/components/*" ] }
    }
}

[miqmago]

Maybe I'm doing something wrong. This is for a react-native app. My tsconfig.json looks like this:

{
    "compilerOptions": {
        "allowJs": true,
        "paths": {
            "baseUrl": "./",
            "app/*": [
                "./*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

Then I have the following structure:

tsconfig.json
components
     └── settings.js
selectors
     └──  index.js

Then in index.js:

import { getSettingsType } from 'app/components/settings';

It still doesn't work: cmd+click not working, neither intellisense.

[miqmago]

(I've also tried to place paths inside jsconfig.json and the result is the same, additionally I'm getting a warning: Property paths is not allowed)

[basarat]

@miqmago you have the config wrong. baseUrl inside paths. It should be outside. You can see a sample project here : https://github.com/alm-tools/alm/tree/1a8e3b836d111fa96f495ea80b2db1539dd2b228/tests/success/baseUrlAndPaths 🌹

[mhegazy]

runnign tsc on teh provided tsconfig.json i get:

c:\ts2>tsc --v
Version 1.9.0-dev.20160518-1.0

c:\ts2>tsc --p ./tsconfig.json
error TS5060: Option 'paths' cannot be used without specifying '--baseUrl' option.
error TS5063: Substitutions for pattern 'baseUrl' should be an array.

[miqmago]

@basarat thanks, this is not working anyway (cmd+hover doesn't find the definition, cmd+click not working):

app/tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": ".",
        "paths": {
            "app/*": [
                "./*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

app/components/settings/index.js

import t from 'tcomb-form-native';

export function getSettingsType(options) {
    const Settings = {
        isShowHelp: t.Boolean,
    };

    return t.struct(Settings);
}

app/selectors/settings.json

import { getSettingsType } from 'app/components/settings';

Also tried the following cases with the same result:

• import { getSettingsType } from 'app/components/settings/index';
• "baseUrl": "./"
• "baseUrl": "./", "paths": { "app/*": [ "*" ] }
• "baseUrl": [ "./" ], "paths": { "app/*": [ "*" ] }
• "baseUrl": "./", "paths": { "app/*": [ "./components/*" ] } and import ... from 'app/settings';
• "baseUrl": "./", "paths": { "sss/*": [ "*" ] } and import ... from 'sss/components/settings';
• "baseUrl": "./", "paths": { "sss/*": [ "*" ] } and import ... from './sss/components/settings';
• "baseUrl": "./", "paths": { "*": [ "components/*" ] } and import ... from 'settings';
• "baseUrl": "./components", "paths": { "*": [ "*" ] } and import ... from 'settings';
• "baseUrl": "./components", "paths": { "*": [ "*" ] } and import ... from 'components/settings';
• "paths": { "app/*": [ "*" ] }
• "paths": { "./app/*": [ "*" ] }

The only working is ../components/settings, it seems that the editor is ignoring baseUrl and paths from tsconfig.json Version 1.1.1-insider (1.1.1-insider)

[mhegazy]

Do not think this path mapping arguemtn males sense in the given example. you are saying if you see something that has a prefix app then remove that prefix and look for that file. so app\component\settings would resolve to component\settings.

this works for me:

c:\test\8528>tree /F
Folder PATH listing for volume OSDisk
Volume serial number is 00000090 9E6D:383F
C:.
│   tsconfig.json
│
└───app
    ├───components
    │   └───settings
    │           index.js
    │
    └───selectors
            settings.js


c:\test\8528>type tsconfig.json
{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "./",
        "outDir": "built"
    },
    "exclude": [
        "node_modules",
        "built"
    ]
}
c:\test\8528>type app\components\settings\index.js
import t from 'tcomb-form-native';

export function getSettingsType(options) {
    const Settings = {
        isShowHelp: t.Boolean,
    };

    return t.struct(Settings);
}
c:\test\8528>type app\selectors\settings.js
import { getSettingsType } from 'app/components/settings';
c:\test\8528>tsc --v
Version 1.9.0-dev.20160518-1.0

c:\test\8528>tsc

one helpful tool to use is --traceResolutions, running:

tsc --traceResolutions on your original sample gives me:

======== Resolving module 'app/components/settings' from 'c:/test/8528/app/selectors/settings.js'. ========
Module resolution kind is not specified, using 'NodeJs'.
'baseUrl' option is set to 'c:/test/8528', using this value to resolve non-relative module name 'app/components/settings'
'paths' option is specified, looking for a pattern to match module name 'app/components/settings'.
Module name 'app/components/settings', matched pattern 'app/*'.
Trying substitution './*', candidate module location: './components/settings'.
Loading module as file / folder, candidate module location 'c:/test/8528/components/settings'.
File 'c:/test/8528/components/settings.ts' does not exist.
File 'c:/test/8528/components/settings.tsx' does not exist.
File 'c:/test/8528/components/settings.d.ts' does not exist.
File 'c:/test/8528/components/settings.js' does not exist.
File 'c:/test/8528/components/settings.jsx' does not exist.
File 'c:/test/8528/components/settings/package.json' does not exist.
File 'c:/test/8528/components/settings/index.ts' does not exist.
File 'c:/test/8528/components/settings/index.tsx' does not exist.
File 'c:/test/8528/components/settings/index.d.ts' does not exist.
File 'c:/test/8528/components/settings/index.js' does not exist.
File 'c:/test/8528/components/settings/index.jsx' does not exist.
.....
======== Module name 'app/components/settings' was not resolved. ========

[miqmago]

@mhegazy Thanks.

When running tsc --traceResolutions I get the following error:

error TS5023: Unknown compiler option 'traceresolutions'.

Also I've just tried the structure that you propose, moving all files inside app folder and leaving tsconfig.json in the parent folder (originally they were all inside app folder). This neither works: cmd+click is not able to find the path. This is very weird, as node_modules which has a file.d.ts defined (i.e. npm i reselect), they get correctly resolved and I can navigate to the imported module file with cmd+click... So I've also tried to write an app/components/settings/index.d.ts:

declare module Settings {
    function getSettingsType(options);
}

export = Settings;

But it neither works. This is very frustrating 😢

[mhegazy]

what version of tsc are you using?

[miqmago]

I've just updated to 1.8.10 right now and the behavior is the same:

$ tsc --version
Version 1.8.2
$ npm i typescript -g
└── typescript@1.8.10 
$ tsc --version
Version 1.8.10
$ tsc --traceResolutions
error TS5023: Unknown compiler option 'traceresolutions'.

Visual Code: Versió 1.1.1-insider (1.1.1-insider)
OS X El Capitan 10.11.5

[miqmago]

Also tried this command and maybe here it is the problem:

$ tsc
error TS5023: Unknown compiler option 'baseUrl'.

tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "./"
    },
    "exclude": [
        "node_modules"
    ]
}

After removing "baseUrl" and adding "outDir": "build" then it worked, with lots of errors but it placed the generated code inside build folder. Adding again "baseUrl" it generates the error again.

[mhegazy]

I've just updated to 1.8.10 right now and the behavior is the same:

all these features are TS 2.0 features. so the version you are using does not support them. i would not expect them to work.

you can get the latest drops of TypeScript through npm install typescript@next. checkout https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Nightly%20Builds.md for setting up your editor/IDE to use that too.

[miqmago]

Did you mean 1.9?

$ npm i typescript@next
└── typescript@1.9.0-dev.20160523-1.0 

Also https://github.com/Microsoft/TypeScript/blob/master/package.json#L5:

    "version": "1.9.0",

Now baseUrl works fine and tsc doesn't complain about Could not resolve..., but cmd+click is still not working. Also tsc --traceResolutions fails with

error TS5023: Unknown compiler option 'traceresolutions'.

Is this feature really developed? (Meaning cmd+click and intellisense for baseUrl paths)

[miqmago]

Also noted that react-native is unable to resolve app/components/settings:

Requiring unknown module "app/components/settings". If you are sure the module is there, try restarting the packager or running "npm install".

(Debugging with Visual Code)

[miqmago]

I think this is not only a question, but a bug/feature and maybe it could be reopened:
The solution given by baseUrl maybe works in editor (I still haven't achieved it) but it's definitively breaking react-native.

[mhegazy]

Did you mean 1.9?

yes. the version says 1.9, we pump the version when we ship. so this is what is going to be TS 2.0. I should have been more explicit.

Is this feature really developed? (Meaning cmd+click and intellisense for baseUrl paths)

This has nothing to do with baseURL, completion in module name is not a feature that was supported before that anyways. Adding support for module name completions is tracked by #188

error TS5023: Unknown compiler option 'traceresolutions'.

the correct flag name is traceResolution. i realize i posted the wrong one erlier. sorry about the confusion. more details can be found in the module resolution documentation at: https://github.com/Microsoft/TypeScript-Handbook/blob/release-2.0/pages/Module%20Resolution.md#tracing-module-resolution

Also noted that react-native is unable to resolve app/components/settings:

This error is not one that the compiler emits, so this is a runtime error. I do not have enough context to be able to help you here.

I think this is not only a question, but a bug/feature and maybe it could be reopened:

Can you provide a project i can look at, i might be able to help better this way,

[miqmago]

Please see https://github.com/miqmago/RNVSTest repo for a demo project.

In this project, you can see that react-native doesn't work and neither it does VSCode intellisense/navigation.

This project is the result of creating the project with react-native init Test and then add the three files in src/,tsconfig.json, .vscode config for Debug in VSCode and add a line in index.android.js. I've just placed the demo for Android device, but it should be the same in iOS:

Requiring unknown module "src/settings".If you are sure the module is there, try restarting the packager or running "npm install".

[mhegazy]

I think i see the probelm. baseURL is a new feature that was not in TS 1.8, and is not in the latest VSCode. you can update your VSCode installation to use a later version of TS (see details here). to do that, you need to install npm install typescript@next, and then point VSCode "typescript_tsdk" to it.

Doing so makes this sample work fine for me using vscode 1.1.1:

[miqmago]

@mhegazy the solution you propose solves the problem of intellisense in visual studio, but this won't run in react-native:

Requiring unknown module "src/settings".If you are sure the module is there, try restarting the packager or running "npm install".
Module AppRegistry is not a registered callable module.

If changing to './src/settings' in index.android.js (to see if it's a deep path problem):

Requiring unknown module "src/something".If you are sure the module is there, try restarting the packager or running "npm install".
Module AppRegistry is not a registered callable module.

[miqmago]

facebook/react-native#3099 (comment) seems to work, I've commited the changes