Auto imports imports from 'react-native/types' instead of 'react-native'

[febis001]

Type: Bug

If you try to use React Native components within a TypeScript JSX file and want to use Auto Import there, Intellisense suggests "react-native/types" as the import source. It should be "react-native" at this point. If there are several possible sources, all should be suggested, or at least the correct one. Why is the variant under "types" of all things suggested? Neither the variant with the shallowest nor the deepest path is suggested.

VS Code version: Code 1.76.2 (ee2b180d582a7f601fa6ecfdad8d9fd269ab1884, 2023-03-14T17:55:54.936Z) OS version: Windows_NT x64 10.0.19044 Modes: Sandboxed: No

System Info

Item	Value
CPUs	12th Gen Intel(R) Core(TM) i7-12700K (20 x 3610)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	undefined
Memory (System)	31.75GB (16.17GB free)
Process Argv	--disable-extensions --crash-reporter-id 764523d7-20e9-4fc3-bca5-bf8f22553962
Screen Reader	no
VM	0%

Extensions disabled

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
vscoreces:30445986
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdc:30486549
c4g48928:30535728
dsvsc012:30540252
pynewext54:30695312
azure-dev_surveyone:30548225
pyindex848:30662994
nodejswelcome1cf:30587006
2e4cg342:30602488
pyind779:30671433
f6dab269:30613381
pythonsymbol12:30671437
pythonb192:30669360
defaultazurewalk:30687958
pythonms35:30686772

[mjbvz]

Please provide a minimal project which demonstrate this issue

[proro485]

@mjbvz Hi there, facing the same issue you can check it out by following these steps:

1. npx create-expo-app --template
2. Select blank Typescript template
3. Now go to the App.tsx file and delete the imports, now go to the View component and try to auto import it.
4. You will see that it is going to import from 'react-native/types' instead of 'react-native'.

This is clearly a bug. I hope you could fix this as soon as possible.

Edit : Fixed this by installing @types/react-native. I know this should be the obvious go to solution but I don't know why the default template is not installing it on project initiliazation.

[RyanCavanaugh]

I can't reproduce this in a clean repro:

• npm init, tsc init
• npm install react-native
• In a TS file, import "react-native"
• Type "View"
• Auto-import adds import { View } from "react-native";

If there's an existing import to "react-native/types", that import path is preferred, but that's the intentional design of auto-import. It's likely the expo-app template is importing from /types and spoiling the pot.

[febis001]

@RyanCavanaugh Maybe I don‘t understand it, but why do I have to do step 3? In my understanding it‘s exactly what you write in your explanation. I didn’t imported “react-native/types“. It‘s the default. In my opinion „react-native“ should be the default. I don’t understand why the default is neither the shallowest possible import path or the deepest possible import path. It‘s just inbetween.

@proro485 Can you explain if you did anything else besides installing @type/react-native? I even tried it myself but that‘s alone didn‘t change anything for me. I had to do install typings too and run the typings install command for react-native. After that auto imports worked but I got syntax overloading errors on each react-native jsx usage

[proro485]

@fbiskoping Nope I just installed @types/react-native package and it fixed it for me. Didn't do any changes except that. Just to verify this maybe try out creating a new project and install the types as a dev dependency. Also for me imports for other libraries like Nativebase was also not working until I installed the @types/react-native and then it was fixed.

yarn add -D @types/react-native or npm i --save-dev @types/react-native

I hope this helps.

@RyanCavanaugh Well previously we didn't have to write down that import statement you mentioned at all, I remember I used to delete everything from the file and wrote the View component and it would properly import View. But now its importing from react-native/types and that happened recently.

[febis001]

@proro485 I tried exactly your steps and it's working for me with the @types/react-native. After that I tried to figure out why it's not working in my project and it turns out that the package react-native-reanimated causes the problem. When this package is installed I get the react-native/types auto import while although using the @types/react-native. Edit: Okay now it's not even working while I removed the package react-native-reanimated. Sometimes so sometimes so. I don't get it Edit 2: Second package causes the same problem for me is react-native-screens

[lightrow]

same here

if nothing has been imported yet, autoimport will import from 'react-native/types' if something has been imported manually from 'react-native', autoimport will continue importing from 'react-native' if @types/react-native is installed, autoimport will correctly suggest importing from 'react-native' again

This only happens with react-native 0.71. Another project currently on 0.70 doesn't have this issue. Starting with 0.71 react native now has typescript supports out of the box, and default project template is now also typescript, so installing @types/react-native shouldn't be necessary anymore

tested this with "npx create-expo-app" and "react-native init", no other libraries, same results both

manually adding import "react-native" to every component file is unheard of

[febis001]

Oh that's interesting. I tried with [email protected] and everything is fine no matter what other packages I have installed. With [email protected] there is still the auto import error and with [email protected] + @types/react-native there is no problem as long as I don't install other packages. When I install further packages the problem is there again. Not every package is causing the problem but I think it's most of the packages that are closely related to react native.

Anyways. I have since come to terms with it and now I use the quick fix option. I have put quick fix on a shortcut similar to auto complete and with it I get not only the option selected by vs code to import, but all. Then I can select react-native again

[microsoft-github-policy-service[bot]]

This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[microsoft-github-policy-service[bot]]

This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[microsoft-github-policy-service[bot]]

This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[dejakob]

Issue still persist. I created a new RN app with Expo yesterday and I'm running into this issue.

[zxcodes]

Issue still persist. I created a new RN app with Expo yesterday and I'm running into this issue.

This was never an issue in Expo AFAIk. I encountered this in React Native CLI projects, and adding @types/react-native solved it.