No more intellisense for react and react-native

[stesvis]

Issue Type: Bug

I am not sure if it started after the automatic VS Code update, but from yesterday I have lost intellisense for React and React Native. When I start typing, for example "<ScrollView" I see the popup suggesting to import from "react-native-web", and "react-native-gesture-handler".

Until yesterday I always had the option to import from those, plus "react-native".

Another example is when I type "useState", I don't get the usual intellisense for react.

This is slowing me down a great deal, like I think many others... (I tried with the "Auto Import" extension on and off)

VS Code version: Code 1.65.0 (b5205cc8eb4fbaa726835538cd82372cc0222d43, 2022-03-02T11:12:08.962Z) OS version: Windows_NT x64 10.0.19043 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz (12 x 3696)| |GPU Status|2d_canvas: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
skia_renderer: enabled_on
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled| |Load (avg)|undefined| |Memory (System)|15.68GB (4.35GB free)| |Process Argv|--crash-reporter-id b4e5dcc1-76a6-4eef-8368-13ea4e35c599| |Screen Reader|no| |VM|0%|

Extensions (33)

Extension|Author (truncated)|Version ---|---|--- sort-imports|ama|6.3.1 laravel-extra-intellisense|ami|0.6.2 vscode-intelephense-client|bme|1.8.2 vscode-expo|byC|0.7.4 path-intellisense|chr|2.8.0 laravel-goto-view|cod|1.3.7 vscode-eslint|dba|2.2.2 es7-react-js-snippets|dsz|4.4.3 EditorConfig|Edi|0.16.4 vscode-great-icons|emm|2.1.82 react-native-react-redux|EQu|2.0.6 prettier-vscode|esb|9.3.0 auto-rename-tag|for|0.1.10 laravel-create-view|gli|0.0.6 laravel-blade-wrapper|IHu|1.0.1 dotenv|mik|1.0.1 csharp|ms-|1.24.1 vscode-react-native|msj|1.9.2 laravel-goto-components|nao|1.2.0 react-proptypes-intellisense|OfH|1.0.3 laravel-blade|one|1.31.0 laravel-extension-pack|one|1.1.0 laravel5-snippets|one|1.15.0 laravel-artisan|rya|0.0.28 code-settings-sync|Sha|3.4.3 vscode-blade-formatter|shu|0.13.3 laravel-goto-controller|ste|0.0.15 vscode-icons|vsc|11.10.0 vscode-import-cost|wix|2.15.0 php-debug|xde|1.25.0 vscode-surround|yat|1.2.2 propertylist|zho|0.0.2 material-theme|zhu|3.13.20 (2 theme extensions excluded)

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vstes627:30244334 pythonvspyl392:30443607 pythontb:30283811 pythonptprofiler:30281270 vshan820:30294714 vstes263cf:30335440 pythondataviewer:30285071 vscod805:30301674 pythonvspyt200:30340761 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593:30376534 vsc1dst:30438360 pythonvs932:30410667 wslgetstarted:30433507 vsclayoutctrt:30448491 vsrem710:30416614 dsvsc009:30440023 pythonvsnew555cf:30442237 vsbas813:30436447 vscscmwlcmt:30438805 vscgsvid2:30447481 helix:30440343 vscaat:30438848 ```

[stesvis]

UPDATE: I can confirm it is due to the latest Vs Code updates. I had another laptop where the intellisense worked, then I restarted Vs Code to get the automatic updates, and after that all my intellisense for react + react-native are gone.

Just adding a couple of screenshots to prove the case:

[mjbvz]

Please share a minimal example project that demonstrates the issue

[stesvis]

Please share a minimal example project that demonstrates the issue

Hi @mjbvz I compared my package.json file with other projects and I saw some differences. I tried to install @types/react-native into this one and then the intellisense started working again.

So now I am wondering...... Why would it not work without this package? Why did it work before, without it?

[mjbvz]

Can you please share the project that causes this (or at least the package.json)

[stesvis]

I can't share this repo but definitely i can share the package.json file:

  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/datetimepicker": "^4.0.0",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/drawer": "^6.3.1",
    "@react-navigation/material-top-tabs": "^6.1.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.5.0",
    "@types/react-native": "^0.67.2",
    "apisauce": "^2.1.5",
    "date-fns": "^2.28.0",
    "expo": "~44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-constants": "~13.0.1",
    "expo-location": "~14.0.1",
    "expo-secure-store": "~11.1.0",
    "expo-status-bar": "~1.2.0",
    "expo-system-ui": "~1.1.0",
    "expo-updates": "~0.11.6",
    "formik": "^2.2.9",
    "http-status-codes": "^2.2.0",
    "linq": "^4.0.0",
    "lottie-react-native": "5.0.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "^0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-maps": "0.29.4",
    "react-native-open-maps": "^0.4.0",
    "react-native-pager-view": "5.4.9",
    "react-native-reanimated": "~2.3.1",
    "react-native-root-toast": "^3.3.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-web": "0.17.1",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "babel-preset-expo": "~8.1.0"
  },

So if i remove this ("@types/react-native": "^0.67.2",) the intellisense is gone now. If I add it, it comes back, on both computers where I code.

[andrewbranch]

@stesvis are these JavaScript or TypeScript files? Do you have a tsconfig.json or jsconfig.json file in your project directory?

[stesvis]

@stesvis are these JavaScript or TypeScript files? Do you have a tsconfig.json or jsconfig.json file in your project directory?

It's a react native app on Expo. I don't have neither a jsconfig or a tsconfig. It ships with an app.json file only.

[stesvis]

Please share a minimal example project that demonstrates the issue

I created a brand new Expo app with react native, I have no intellisense for react native unless I install @types/react-native https://github.com/stesvis/ReactNativeDemo

[andrewbranch]

Note to self: test repro from #48210 too

[developerprv]

I recently set up a new computer, I first used "npx create-react-app my-app" to create a new react project. All import suggestions showing correctly for a few weeks. After a few weeks, I setup a project with "npx create-react-app my-app --template typescript" and now all of my standard react projects no longer receive the correct import suggestions, but the react with typescript projects do receive them correctly. So, it seems like the issue is adding typescript via create-react-app? I wonder why it would affect other projects, though?

[geanrt]

Como pode resolver esse problema sem um jsconfig.json?

[thereallimardo]

Any idea of whats going on with this ??

it stopped working for me today, the regular "TS" on another vs code without react native does work

[ammarfaris]

Please share a minimal example project that demonstrates the issue

I created a brand new Expo app with react native, I have no intellisense for react native unless I install @types/react-native https://github.com/stesvis/ReactNativeDemo

same for me