"React" tanımlanmadan önce kullanıldı

Question

Create-react-app + typescript + eslint uygulaması ile çalışıyorum ve derleme sırasında şu hatayla karşılaşıyorum:

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

Bileşenimdeki kod şununla başlıyor:

import React from "react";

Eslint ayarları:

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"
  },
};

Package.json dosyasının bir kısmı:

"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",
  ...
}

Denedim:

• Okuyun https://github.com/typescript-eslint/typescript-eslint/issues/2502
• .Eslintrc.js'de @ typescript-eslint / no-use-before-define ve no-use-before-define devre dışı bırak
• Aslında .eslintrc.js'yi silmeye çalıştım ama aynı hatayı aldım.

Answer 1

Hata, @typescript-eslinttepki komut dosyalarındaki ve yerel package.json- GitHub sorununuzdaki sürümlerin uyumsuzluğundan kaynaklanıyor

Sürümlerini react-scriptsgüncelleyene kadar paketleri eski sürüme geçirebilirsiniz .

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

DÜZENLEME 14/09/2020

Birden fazla kişi aynı hatayı kullanmadan bildirdiği için hata react-scriptssürümüyle ilgili değil gibi görünüyor .@typescript-eslintreact-scripts

Her neyse, geçici çözüm aynı kalır - @typescript-eslintdüzeltme mevcut olana kadar çalışma sürümüne geçin .

24/10/2020 DÜZENLE

[email protected]güncellenmiş olarak yayınlandı @typescript-eslint. En yeni sürümü kullanmak sorunu çözmelidir.

DÜZENLE 04/11/2020

Paketleri yükselttikten sonra hata hala oradaysa, büyük olasılıkla eslint yapılandırmanız yanlış kuralı kullanıyor. Check out Igor'un cevabı düzeltmek için.

Answer 2

Gönderen Resmi belgelerin .

"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

Sorunumu böyle çözdüm.

1. Her şeyden önce, node_modules / react-scripts / config / webpack.config.js'ye gidin ve önbelleği false olarak değiştirin, çünkü bu, neyin işe yarayıp neyin yaramadığını anlamanıza yardımcı olacaktır, o zaman eslint dosyasını değiştirirsiniz. Onu burada buldum

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

1. ENV varialbe'yi .env dosyasına ekleyin. Daha fazla bilgi

 EXTEND_ESLINT=true

1. Şu andan itibaren CRA, derlemeniz sırasında yerel eslintinizi kullanmak zorunda kalacak ve benim durumumda .eslintrc'deki bazı kuralları devre dışı bırakmak için kontrolümüz var:

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

Answer 4

Bunun için düzeltmem: react-scripts olarak eslint 6'yı, repo'nun geri kalanı olarak daha yeni @ typescript-eslint paketlerini kullanmak için Force react betiklerini kullanıyor. Burada seçici çözünürlük kullanıyorum

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

@typescript-eslint 4.x hala es6'yı destekliyor

Answer 5

Yorum yapmak için yeterli kredi yok.

@sashko cevaplarınız için teşekkür ederim.

Bunu kendim için eklemek istedim, aşağıdakileri yaptım.

1. React-scripts tarafından package-lock.json'a zaten dahil edilmişlerse eslint ile ilgili tüm bağımlılıklar package.json'dan kaldırıldı (benim için hepsi buydu)
2. Node_modules klasörümü ve package-lock.json dosyamı sildim
3. npm yükleme

Bu adımları tamamladıktan sonra nihayet bu hatayı ortadan kaldırdım. Bağımlılıkları eski sürüme düşürmek yerine kaldırmayı tercih ederim çünkü bu, aynı sorunun gelecekte tekrar olmasını önlemeye yardımcı olacaktır.

Answer 6

EslintAyarlarınıza içe aktarım / çözümleyici eklemeyi deneyin :

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

Belki de yüklemeniz gerekecek:

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

Bu işe yaramazsa, bu kuralı değiştirebilirsiniz

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

bunun gibi:

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

Answer 7

ESLINT'te mevcut bir konudur.

Yolu ben çözmek eklemektir ESLINT / kurallara aşağıdaki satırları :

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

Answer 8

Typescript kullanan bir Gatsby projesi ve genişletilmiş bir ESLint yapılandırması ile ilgili sorunlar almaya başladıktan sonra bu sayfaya girdim eslint-config-airbnb-typescript. OP'nin hatasına ek olarak ESLint, tanımlanmayan çeşitli kurallarda Definition for rule '@typescript-eslint/no-redeclare' was not found.ve diğer birkaçında da hatalar veriyordu .

Altta yatan sorun, Gatsby'nin hem @typescript-eslint/eslint-pluginve hem de @typescript-eslint/parser. yarnYalnızca güncel sürümleri yüklemeye zorlamak sorunu çözdü:

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

Answer 9

(yorum yapmak için yeterli temsilci yok)

@ sashko'nun çözümü işe yarıyor gibi görünüyor - silme node_modulesde gerekliydi.

Kaçırdığım bir şey, içerideki şapka oldu "^4.0.1". Sürümün düzeltme işareti olmadan düzeltilmesi ^gerekiyor, bu da @Rolly'nin yaşadığı sorun gibi görünüyor. Emin ol 4.0.1.

react-scriptsV4 güncellemelerine kadar yalnızca bir geçici çözüm (kullanıyorum create-react-app)

Answer 10

node_modulesklasörü silmek ve yeniden yüklemek benim için çalıştı. yarnPaket yöneticisi olarak kullanıyorum .

Answer 11

Bu, 4.4.0'da çözülmüştür. Bu bağımlılıkları 4.4.0 sürümüne yükseltin

Güncelleme: Bu, bazı kullanım durumları için işe yarayabilir. Bu benim sorunumu çözdü.

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

Answer 12

Ben paketleri silindi @typescript-eslint/eslint-pluginve @typescript-eslint/parserne biz gelen package.json, silinmiş node_modulesve package-lock.json, yeniden paketler: npm install Hata kayboldu.

GÜNCELLEME

Bundan sonra create-react-app @typescript-eslint/eslint-plugin, kullanımdan kaldırılan kendi modülünü kullanır .

Answer 13

Bu hatayı yalnızca .jsdosyalar @typescript-eslint/parseriçin alıyorsanız, yalnızca Typescript dosyalarında kullanıldığından emin olun .

.eslintrc.json (kısaltılmış)

{
  "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"
  ],
}