TS2786 '구성 요소'는 JSX 구성 요소로 사용할 수 없습니다.

TS2786 '구성 요소'는 JSX 구성 요소로 사용할 수 없습니다.

컴파일되지 않는 React Types 스크립트 응용 프로그램이 있습니다.대부분의 구성 요소에는 반환할 렌더 메서드가 입력되어 있습니다.React.ReactNode또는React.ReactElement컴파일 시 다음과 유사한 많은 오류가 보고됩니다.

TS2786: 'MessagesWidget' cannot be used as a JSX component.
 Its instance type 'MessagesWidget' is not a valid JSX element.
 The types returned by 'render()' are incompatible between these types.
 Type 'React.ReactNode' is not assignable to type 'import("/home/node/app/node_modules/@types/react-calendar/node_modules/@types/react/index").ReactNode'.

컴파일러가 예상하는 이유는 무엇입니까?ReactNode번들로 제공되는 유형으로 정의된 대로react-calendar가지고 있습니다@types/react-dom개발 종속성으로 설치됩니다.

관련될 수 있는 기타 정보:

1. 이 프로젝트는 며칠 전까지 컴파일 중이었고 컴파일이 실패하기 시작할 때 코드 변경이 없었기 때문에 패키지 업데이트가 이를 유발한 것으로 생각됩니다(근본 원인은 아니더라도).로 시작되었을 때 은 컴일이시않았때을시창업다간같니습종다음과속은파성된트데이에서지작되▁depend▁the뿐이었습니다.@types/react그리고.@types/react-dom그러나 이러한 패키지를 이전 버전으로 롤백해도 문제가 해결되지 않았습니다.
2. 요소 을 반환하도록 중 - 구성요메를서반환도록변경중는하하내드렌소더링▁changingJSX.Element컴파일러 오류를 제거하지만 응용 프로그램에 타사 구성 요소가 있습니다.

해결책이 있습니다. 18.0.1 유형 정의에 엄청난 변화가 있는 것 같습니다.

당신처럼 이전 버전으로 롤백하여 해결할 수는 없었지만, 조사 결과 'react-router'가 다른 것들 중 '18.0.1' 버전을 도입했기 때문이라는 것이 밝혀졌습니다.

이것을 피하기 위해, 저는 제 소포에 다음과 같은 것을 추가했습니다.제이손

  "resolutions": {
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.14"
  },

그런 다음 노드 모듈을 정리하고 패키지 캐시를 정리한 다음 실을 다시 실행하여 새로운 패키지를 꺼냈습니다.

해상도 섹션은 실(제가 사용하는)을 위한 섹션입니다.그리고 NPM을 사용하는 경우에는 'resolution'이 아닌 'overrides'를 사용할 수 있다고 생각합니다.

npm 버전은 >= 8 https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides 이어야 합니다.

package-lock.json을 npmi 앞에 삭제합니다.

오류 TS2786은 종종 의 불일치로 인해 발생합니다.@types/react.

의 버전에 때@types/react및 (v17.0.47)의 .@types/react때가 발생할 수 .React.ReactNode또는JSX.ElementJSX.Element는 일반적으로 React Function 구성 요소에 의해 반환됩니다.

당신은 당신의 의존성을 합리화함으로써 문제를 해결할 수 있습니다.@types/react이들이 동일한 주요 버전을 따르도록 합니다.다음에 따라 모든 라이브러리를 찾을 수 있습니다.@types/react실행하여 프로젝트에서npm explain @types/react(a일 때package-lock.json파일 있음) 또는yarn why @types/react(a일 때yarn.lock파일 있음).

당신의 구체적인 경우에는 의존성이 있는 것으로 보입니다.@types/react-calendar로.@types/react당신의 문제는 다른 버전을 사용하는 프로젝트에 다른 종속성이 있다는 것입니다.@types/react어쩌면 당신은 직접적인 의존을 가지고 있을지도 모릅니다.@types/react여기서 정확한 버전 번호는 다음과 다릅니다.@types/react필요한 버전@types/react-calendar.

다음은 적용된 버전을 검사하는 방법을 보여주는 비디오입니다.@types/react당신의 프로젝트에서.

반품 시 발생할 수 있습니다.children:

export const Component = ({ children }) => {
    //...do stuff
    return children
}

수정하려면 조각으로 감싸야 합니다.

return <>{children}</>

제 생각에 이것은children요소 배열일 수 있으며 단일 요소만 반환할 수 있습니다.이러한 종류의 오류에 대한 일반적인 메시지는 다음과 같습니다.

JSX expressions must have one parent element.

이 문제는 @types/react 버전 TS2786의 불일치와 함께 발생합니다.

npm 중복제거 또는 실 중복제거로 수정

만약 있다면,yarn사용자가 돌아다니고 있습니다. 최근 대응/비활성 네이티브 버전 업그레이드를 수행한 후 이 문제가 발생했습니다. 기존 버전을 삭제하기만 하면 됩니다.yarn.lock& 일파 & 더node_modules을 합니다.yarn install다시 한 번 제게 효과가 있었습니다.:)

React native를 0.66.3에서 0.70.6으로 업데이트한 후 동일한 문제에 직면했습니다.저는 패키지의 "해상도"를 변경하여 문제를 해결했습니다.제이손

"resolutions": {
    // "@types/react": "^17" remove this
    "@types/react": "^18.0.8" //adding this
 },
  // After Change remove node_modules 
  // run npm i OR yarn

 
 

중 오류 제 한 답변이 . TS2786
은 update tsconfig입니다.

부터

{
  "compilerOptions": {
    "preserveSymlinks": true,
    ...

로.

{
  "compilerOptions": {
    "preserveSymlinks": false,
    ...

아니면 그냥 제거하기만 하면 됩니다.

는 ㅠㅠㅠreact-route은 v18을 지원하지 .react-virtualized그리고 그것은 격하되어야 합니다.

따라서 간단한 방법은 아래와 같이 경로를 다운그레이드하는 것입니다.

"@types/react": "17.0.0",
"@types/react-dom": "17.0.0"

그러면, 당신의 앱이 제대로 작동할 것입니다.

react 및 react-domain 패키지의 최신 버전을 추가하면 됩니다.json 및 아래 명령을 실행하여 react 및 react-dom을 다시 설치합니다.

여기서, 이 답변을 게시하는 동안, 반응 및 반응 세계의 최신 버전은 18입니다.

단계-

1. 프로젝트의 package-lock.json 파일을 제거합니다.
2. 패키지 열기.당신 프로젝트의 아들.
3. react 및 react-dom 버전 교체

"@types/react": "^18",

"@types/react-dom": "^18"

4.실행 명령

npm install --save-dev @types/messages @types/messages-dom

됐습니다. 제 문제를 해결했습니다.

저는 이 오류에 대해 같은 문제에 직면했습니다.저는 제 패키지에 아래 코드를 추가합니다.json 파일을 확인했습니다.

"resolutions": {
  "@types/react": "17.0.2",
  "@types/react-dom": "17.0.2",
  "graphql": "^16.5.0"
},

는 ''jsx''를 변경하여 이 했습니다.: 'react'을 tsconfig.json으로 변환합니다.jsx:react-jsx

제 아이 구성 요소의 반품 명세서를 수정한 후 제 아이가 해결되었습니다.

난 그 안에 있었어요.

return; <form></form>

변경된 항목:

return (<form></form>)

이전에 반응 17에 대한 분해능이 있는 경우:

"resolutions": {
    "@types/react": "^17.0.0"
 },

업데이트할 때 제거되지 않는 패키지 잠금/잠금 해제 항목을 생성합니다.그래서 당신은 이 해상도와 실잠금 항목을 제거해야 합니다.다음과 같이 표시됩니다.

"@types/react@*", "@types/react@17.0.21", "@types/react@^17":
  version "17.0.21"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.21.tgz#069c43177cd419afaab5ce26bb4e9056549f7ea6"
  integrity something
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
    csstype "^3.0.2"

둘 다 제거하고 설치를 다시 실행하면 문제가 해결됩니다.

@types/react를 추가하지 않은 경우 다음과 같이 먼저 추가하십시오.

yarn add --dev @types/react

언급URL : https://stackoverflow.com/questions/71831601/ts2786-component-cannot-be-used-as-a-jsx-component