'React' digunakan sebelum ditentukan

Question

Saya bekerja dengan aplikasi create-react-app + typescript + eslint dan selama build mengalami kesalahan seperti itu:

Line 1:8:  'React' was used before it was defined  @typescript-eslint/no-use-before-define

Kode di komponen saya dimulai dengan:

import React from "react";

Pengaturan Eslint:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": 0,
    "@typescript-eslint/triple-slash-reference": 0,
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "off"
  },
};

Beberapa bagian dari package.json:

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.1.0",
  "@typescript-eslint/parser": "^4.1.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.6.0",
  "eslint-config-airbnb": "^18.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-react": "^7.20.0",
  "prettier": "^2.0.5",
  "start-server-and-test": "^1.11.3"
},
"dependencies": {
  ...
  "react-scripts": "3.4.3",
  ...
}

Saya mencoba:

• Baca https://github.com/typescript-eslint/typescript-eslint/issues/2502
• Nonaktifkan @ typescript-eslint / no-use-before-define dan no-use-before-define di .eslintrc.js
• Sebenarnya saya mencoba menghapus .eslintrc.js sama sekali, tetapi mengalami kesalahan yang sama.

Answer 1

Bug terjadi karena ketidakcocokan @typescript-eslintversi dalam skrip-react dan masalah lokal package.json- GitHub Anda

Anda dapat menurunkan versi paket hingga react-scriptsmemperbarui versinya.

    "@typescript-eslint/eslint-plugin": "4.0.1",
    "@typescript-eslint/parser": "4.0.1",

EDIT 14/09/2020

Tampaknya bug tersebut tidak terkait dengan react-scriptsversi @typescript-eslintkarena beberapa orang melaporkan bug yang sama tanpa menggunakan react-scripts.

Bagaimanapun, solusinya tetap sama - turunkan ke versi yang berfungsi @typescript-eslinthingga perbaikan tersedia.

EDIT 24/10/2020

[email protected]telah diterbitkan dengan pembaruan @typescript-eslint. Menggunakan versi terbaru seharusnya menyelesaikan masalah.

EDIT 11/04/2020

Jika setelah memutakhirkan paket kesalahan masih ada, kemungkinan besar konfigurasi eslint Anda menggunakan aturan yang salah. Lihat jawaban Igor untuk memperbaikinya.

Answer 2

Dari dokumentasi resmi .

"rules": {
  // note you must disable the base rule as it can report incorrect errors
  "no-use-before-define": "off",
  "@typescript-eslint/no-use-before-define": ["error"]
}

Answer 3

Begitulah cara saya menyelesaikan masalah saya.

1. Pertama-tama, buka node_modules / react-scripts / config / webpack.config.js dan ubah cache menjadi false, karena ini akan membantu Anda untuk memahami apa yang berhasil dan apa yang tidak, lalu Anda mengubah file eslint. Saya menemukannya di sini

 cache: true, // You can set it to false
 formatter: require.resolve('react-dev-utils/eslintFormatter'),

1. Tambahkan variabel ENV ke file .env. Info lebih lanjut

 EXTEND_ESLINT=true

1. Mulai sekarang CRA harus menggunakan eslint lokal Anda untuk linting selama pembuatan dan kami memiliki kontrol untuk menonaktifkan beberapa aturan, dalam kasus saya di .eslintrc:

rules: {
    "@typescript-eslint/no-use-before-define": "off"
},

Answer 4

Perbaikan saya untuk itu: Gunakan eslint 6 karena react-scripts menggunakan Force react script untuk menggunakan paket @ typescript-eslint yang lebih baru sebagai repo lainnya. Saya menggunakan resolusi selektif di sini

  "resolutions": {
    "**/react-scripts/**/@typescript-eslint/eslint-plugin": "^4.4.1",
    "**/react-scripts/**/@typescript-eslint/parser": "^4.4.1"
  }

@typescript-eslint 4.x masih mendukung es6

Answer 5

Kredit tidak cukup untuk berkomentar.

@sashko terima kasih atas jawaban Anda.

Saya hanya ingin menambahkan itu untuk saya, saya melakukan hal berikut.

1. Menghapus semua dependensi terkait eslint dari package.json jika sudah disertakan dalam package-lock.json oleh react-scripts (bagi saya itu semuanya)
2. Menghapus folder node_modules saya, dan file package-lock.json
3. npm install

Setelah menyelesaikan langkah-langkah itu, saya akhirnya mendapatkan kesalahan itu. Saya lebih suka menghapus dependensi daripada menurunkannya karena ini akan membantu menghindari masalah yang sama terjadi lagi di masa mendatang.

Answer 6

Coba tambahkan import / resolver ke Eslintpengaturan Anda :

  "settings": {
    "react": { "version": "detect" },
    "import/resolver": { "typescript": {} }
  }

Mungkin Anda perlu menginstalnya juga:

$ yarn add -D eslint-import-resolver-typescript

Jika tidak berhasil, Anda dapat mengubah aturan ini

"@typescript-eslint/no-use-before-define": "off"

seperti ini:

"no-use-before-define": "off"

Answer 7

Ini adalah masalah yang ada di ESLINT.

Cara saya menyelesaikannya adalah dengan menambahkan baris berikut ke ESLINT / rules :

"no-use-before-define": [0],
"@ typescript-eslint / no-use-before-define": [1],

Answer 8

Saya sampai di halaman ini setelah saya mulai mendapatkan masalah dengan proyek Gatsby yang menggunakan Ketikan dan konfigurasi ESLint yang diperpanjang eslint-config-airbnb-typescript. Selain kesalahan OP, ESLint juga memberikan kesalahan pada berbagai aturan yang tidak didefinisikan, seperti Definition for rule '@typescript-eslint/no-redeclare' was not found.dan beberapa lainnya.

Masalah yang mendasarinya adalah Gatsby menggunakan versi lama dari keduanya @typescript-eslint/eslint-plugindan @typescript-eslint/parser. Memaksa yarnuntuk menginstal hanya versi terbaru menyelesaikan masalah:

// package.json
"resolutions": {
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0"
}

Answer 9

(tidak cukup perwakilan untuk berkomentar)

Solusi @ sashko tampaknya berhasil - menghapus node_modulesjuga perlu.

Satu hal yang saya lewatkan adalah tanda sisipan "^4.0.1". Versi perlu diperbaiki tanpa tanda sisipan ^, yang tampaknya menjadi masalah yang dialami @Rolly. Pastikan itu 4.0.1.

Hanya solusi sampai react-scriptspembaruan ke v4 (saya menggunakan create-react-app)

Answer 10

menghapus node_modulesfolder dan menginstalnya kembali berhasil untuk saya. Saya menggunakan yarnsebagai manajer paket.

Answer 11

Ini telah diselesaikan di 4.4.0. Tingkatkan dependensi ini ke versi 4.4.0

Pembaruan: Ini mungkin berfungsi untuk beberapa kasus penggunaan. Ini menyelesaikan masalah saya.

"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
   

Answer 12

Saya menghapus paket @typescript-eslint/eslint-plugindan @typescript-eslint/parserdari paket saya package.json, yang dihapus node_modulesdan package-lock.json, diinstal ulang: npm installKesalahan menghilang.

MEMPERBARUI

Setelah itu create-react-app menggunakan @typescript-eslint/eslint-pluginmodulnya sendiri yang tidak digunakan lagi.

Answer 13

Jika Anda hanya mendapatkan kesalahan ini untuk .jsfile, pastikan @typescript-eslint/parserdigunakan secara eksklusif pada file Typecript.

.eslintrc.json (disingkat)

{
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": ["@typescript-eslint"],
      "rules": {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
      },
    }
  ],
  // WRONG: Do not use @typescript-eslint/parser on JS files
  // "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    // "@typescript-eslint"
  ],
}