Question 32969 in React native Question posted in
The official React Native documentation can be found here.

How to fix error in eslint while type import? – React native

Hi I have probleb with ESLINT setup, for my TS, expo, react-native project.

I have added TS, import type, and have ‘parsing error’ from standard.

enter image description here

my configs:

babel.js:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo', ]
  }
}

tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

and .eslintrc.js

module.exports = {
  env: {
    browser: false,
    es2021: true
  },
  extends: [
    'plugin:react/recommended',
    'standard-with-typescript'
  ],
  parser: '@typescript-eslint/parser',
  overrides: [
    {
      files: ['*.ts', '*.tsx'], // Your TypeScript files extension

      // As mentioned in the comments, you should extend TypeScript plugins here,
      // instead of extending them outside the `overrides`.
      // If you don't want to extend any rules, you don't need an `extends` attribute.
      extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],

      parserOptions: {
        project: ['./tsconfig.json'] // Specify it only for TypeScript files
      }
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
  }
}

What happened here and how can I remove that error in my VS Code?

Tags:

2

Answers


  1. 0

    I guess the error is given the way you are importing FC and it is not ESLINT related:

    Please, try that approach:

    import React, { FC } from 'react';

interface Props {
    message: string;
}

const MyComponent: FC<Props> = ({ message }) => {
    return (
        <>
            <h1>Welcome {message}</h1>
        </>
    );
};

export default MyComponent;

    References: react-native-docs

    Login or Signup to reply.
  2. 0

    If you’re not yet on TypeScript 4.5,

    1. import { type Foo } from "bar" is not a thing. It should be import type { Foo } from "bar". See the section of the TypeScript 3.8 release notes that introduced the "Type-Only Imports" feature and the TypeScript docs’ section on "Importing Types"

    2. You can’t mix type-only imports and non-type-imports in the same import statement. Again, see the section of the TypeScript 3.8 release notes that introduced the "Type-Only Imports" feature:

      If you’ve used Flow before, the syntax is fairly similar. One difference is that we’ve added a few restrictions to avoid code that might appear ambiguous.

      // Is only 'Foo' a type? Or every declaration in the import?
// We just give an error because it's not clear.
import type Foo, { Bar, Baz } from "some-module";
//     ~~~~~~~~~~~~~~~~~~~~~~
// error! A type-only import can specify a default import or named bindings, but not both.

      You should separate the type-only imports and non-type-imports into separate import statements.

    However, if you’re on TypeScript 4.5 or later, this should be working for you:

    This is a TypeScript lanugage feature described in the v4.5 release notes.

    There was mention that it would take time for other tooling to support the new syntax.

    For babel, support should be there now: https://github.com/babel/babel/issues/13799 and https://github.com/babel/babel/pull/13802.

    I’m not sure about ESLint. There’s a related issue ticket about exports here: https://github.com/typescript-eslint/typescript-eslint/issues/3597

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search