Problem finding modules for starter project

[waderyan]

From @jankalfus August 10th

Sometimes when I open my project, VS Code is unable to find imported external modules. I've got typings for the modules installed, all files in the project compiles fine using tsc, but I get red squiggly lines in the editor. The weird thing is that I get the squiggly lines only for some .tsx files, while it works for others.

The file src/web/App.tsx is fine:

While I get squiggly lines for the file src/native/App.tsx:

My tsconfig.json content is the following:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": false,
        "jsx": "react",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "module": "commonjs",
        "target": "es5",
        "rootDir": "src"
    },
    "exclude": [
        "node_modules",
        "src/native",
        "app",
        "app-native",
        "tools",
        "test"
    ]
}

Both react and react-native are installed as global typings.

Unfortunately, I cannot post the source code right now, but basically, the structure of the source files is as following:

src
 |-- common
 |-- native
       |-- index.ts
       |-- App.tsx
 |-- web
       |-- App.tsx
 |-- index.ts (this one is for web)

• VSCode Version: 1.4.0
• OS Version: Windows 10

Any ideas?

[waderyan]

From @jankalfus August 10th

I have noticed that if I use File -> Close folder and then File -> Open Folder... and open the project folder again, the errors are gone. If I just restart VS Code instead, I keep getting the errors. I presume that some internal cache gets cleared?

[waderyan]

From @jankalfus August 10th

More to this issue: I get the errors every time I create a new folder and ts/tsx file inside. Unfortunately, the workaround I've suggested in the previous comment doesn't work.

[waderyan]

From @jankalfus August 10th

I've published the source code. To reproduce this issue:

1. Go to https://github.com/gina-system/react-starter
2. Use the steps in the quick start section of the readme
3. Open the src/native/App.tsx file.

[waderyan]

From @waderyan August 10th

I have reproduced this per @jankalfus's instructions.

I'm seeing a "Cannot Find Module" when I hover over react-native

Developer shows a seemingly unrelated error.

It seems like typings directory is configured correctly.

[waderyan]

From @waderyan on August 10th

Ok this is strange... I reopened the project to grab another screen shot and this is what I saw.

Everything looks good now.

I retraced my steps.

1. re-cloned https://github.com/gina-system/react-starter in a separate dir.
2. followed the README steps (npm install, typings install)

Looks good again.

[michaeljota]

I have this same issue. Not with React, but with any new module that I make.

[fabiom-zz]

I had experienced the same issue. Perhaps this can provide additional clues:

• Adding <reference path=""> in a completely separate .ts file worked for a while. I have 1 file with all references I needed and that worked until recently.
• Adding a <reference path=""> in the file that is having issues always solves the problem. This has been my workaround.
• There is no pattern I can see when it happens. Files in the same folder may work or not. No apparent "order" seems to trigger it (alphabetical order, folder order, etc). No specific particular module seems to cause it although I had more issues with 'react'.
• tsc does not report issues. Just VS Code.

[briantobo]

I'm having a similar problem, see the attached screenshot showing two files in the same folder of the same project, one of which shows the problem while the other is working correctly. I had no such problem until today, so it's hard to tell what triggers the bug.