reactjs - Typescript useState ReferenceError: string განსაზღვრულია

import React, {
  FunctionComponent,
  useState,
  useEffect
} from 'react'

const SearchBar: FunctionComponent = () => {
  const [searchValue, setSearchValue] = useState < string > ('')
  const [isSuggestionOpen, setIsSuggestionOpen] = useState < boolean > (false)

  async function showSuggestedWords(event) {
    setSearchValue(event.target.value)

    try {
      const res = await fetch(`https://www.someurl.com/q=${searchValue}`)
      const suggestedWordsArray = await res.json()
      // setSuggestedWords(suggestedWordsArray[1].slice(0, 10))
      setIsSuggestionOpen(true)
      return
    } catch {
      console.log('error fetching suggested results')
      setIsSuggestionOpen(false)
    }
  }


  return ( <
    div >
    <
    form action = "/Controller"
    method = "get" >
    <
    input name = "q"
    type = "text"
    value = {
      searchValue
    }
    onChange = {
      showSuggestedWords
    }
    autoComplete = "off"
    autoCapitalize = "off"
    autoCorrect = "off"
    spellCheck = "false"
    placeholder = "Search here" /
    >
    <
    button type = "submit" >
    Submit <
    /button> <
    /form> <
    /div>
  )
}


ReactDOM.render( <
  div > < h1 > Hello, world! < /h1> <SearchBar / > < /div>,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.0.3/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

მე ახალი მაქვს TypeScript-ში, ასე რომ ეს შეიძლება აშკარა გადაწყვეტილება იყოს.

მე მაქვს პროექტი, შექმნილი React, Nextjs და Typescript-თან ერთად.

მოდული ტაიპსქრიპტს ვიყენებ ჩემი მდგომარეობის ტიპის განსაზღვრას ასე: const [searchValue, setSearchValue]=useState<string>('')

და მიჩნდება შეცდომა შესრულების დროს: ReferenceError: string არ არის განსაზღვრული.

მერე ვერ მივხვდი, რა არის გართულება. ყველგან რაც შევამოწმე, ურჩევდნენ მდგომარეობის ტიპის განსაზღვრას ისეთად, როგორც ზემოთ გავაკეთე.

აქ არის ჩემი typescript კონფიგურაცია:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

მესამე ვერ მაქვს webpack კონფიგურაცია, რადგან ისინი მოყვება Nextjs-თან (რომელიც უკვე კონფიგურირებულია მუშაობისთვის typescript-თან.)

მე ნამდვილად მაქვს დაყენებული @types/react @types/react-dom @types/node.

არაფერი მინიშნება?

პასუხი #1

გამოჩნდა, რომ ეს იყო გარკვეული არასათანადო კონფიგურაცია ჩემს babel.config.json-ში

მე ყველაფერი მოვხსენი და მხოლოდ ეს ხაზები დავიტოვე:

{
  "presets": ["next/babel"],
  "env": {
    "test": {
      "presets": ["next/babel"]
    }
  }
}

ამ გზით მე ჯერ კიდევ შემიძლია ჩემს Jest ტესტების შესრულება.

იმედია, ეს შეიძლება გამოადგეს ვინმეს მსგავსი სიტუაციაში :)