1

I am developing a app with React-Native and I am using vscode as a code editor. When I import some image or package, I got these red and yellow underline error. How to fix this?

One thing that I can't understand is only "Fontawesome" has no such error, but both "MaterialCommunityIcons" and "Ionicons" have red underline error. (Line 4,5,6)

When I mouse over the line 1 yellow underline, it shows me following.

ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.

When I mouse over the line 5,6 red underline, it shows me following.

Could not find a declaration file for module 'react-native-vector-icons/MaterialCommunityIcons'.

I uninstall and installed "react-native-vector-icons" package several times but same error.(exactly not error, I think just type error. Code working well.) I installed following extensions.

enter image description here

enter image description here

Gama11
  • 31,714
  • 9
  • 78
  • 100
SatelBill
  • 641
  • 2
  • 12
  • 28

3 Answers3

4

It would be fitting to post separate questions for these, but:

  1. Error on line one (ESLint is disabled):

This might have several reasons, but given the error message please try the following method in the command palette and allowing ESLint access:

cmd + shift + p, search for 'ESLint: Manage Library Execution'

Otherwise you can check other solutions eg. here: ESLint not working in VS Code?

  1. MaterialCommunityIcons type declaration missing error:

Perhaps you have not installed the corresponding types - do so by running:

yarn install @types/react-native-vector-icons -D

  1. Cannot import from *.png error:

By default, typescript does not understand *.png files. You can fix this by adding a *.d.ts (eg. assets.d.ts) file (eg. in a top-level types folder), with the following contents:

declare module '*.png' {
  const value: any;
  export = value;
}

Make sure the file is at a path typescript can find (must be listed in the compilerOptions.include property in your tsconfig.json).

Marek Lisik
  • 2,003
  • 1
  • 8
  • 17
  • Thank you very much. It helped me. How can I get these kind of knowledge of typescript? As I am a newbie in TS, is there any reference link to get this simple but necessary knowledge? – SatelBill Mar 24 '21 at 10:15
  • I can recommend [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) but it's just about the language. The issues above are more about how different tools work together (eslint and vscode, typescript and third party libraries). If you ever encounter issues like that, I would definitely recommend searching stack or google for the error message to get some insight into why it happens and how to fix. – Marek Lisik Mar 25 '21 at 11:16
0

easy way to get rid of it: disable the Eslint Extension and reload the vs code

Haseeb Rehman
  • 11
  • 1
0

You can add this line at the top of your code :

/* eslint-disable prettier/prettier */

This line disables eslint extension which solve the problem in my case

vees1
  • 21
  • 6