'React'는 UMD 글로벌을 나타내지만 현재 파일은 모듈입니다.

'React'는 UMD 글로벌을 나타내지만 현재 파일은 모듈입니다.

리액트 앱 4.0을 만들기 위해 프로젝트를 업데이트했고, 파일을 TypeScript로 옮기는 것이 늦어지고 있습니다.이 새로운 버전에서는 React에서 React를 반복 Import할 필요가 없다는 것을 알고 있습니다.그러나 React를 Import하지 않은 모든 TS 파일에는 다음 오류가 표시됩니다.

'React'는 UMD 글로벌을 나타내지만 현재 파일은 모듈입니다.대신 Import를 추가하는 것을 검토해 주십시오.ts(2686)

React를 수입하면 고칠 수 있다는 것은 알지만, 더 이상 필요없다고 생각했습니다.또, 이 에러의 의미를 설명해 주실 수 있습니까?

기본 TSX 파일

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;

Create React App은 버전 4의 새로운 JSX 변환을 지원하지만 커스텀 셋업을 사용하는 경우 쓰기 시 TypeScript 오류를 제거하려면 다음 사항이 필요합니다.jsx없이.import React from 'react':

• typescript버전 4.1 이상
• react그리고.react-dom버전 17 이상의
• tsconfig.json가 있어야 한다jsx컴파일러 옵션react-jsx또는react-jsxdev

예:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

React 17 JSX Factory 지원에 대한 TypeScript 문서는 여기를 참조하십시오.

추가 중

import React from 'react'

이 문제를 해결하다

이 오류 메시지는 TypeScript 컴파일러에서 발생합니다.React 17의 새로운 jsx 변환은 현재 Typescript 4.0에서 지원되지 않으며 4.1에서 지원됩니다.

TypeScript v4.1 베타 - React 17 JSX 팩토리

Dan이 쓴 내용은 정확합니다. TS를 변경할 수 있습니다.config.json:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

또는 React 파일을 Import하면 다음과 같은 오류가 발생합니다.

import React from 'react'

여기서의 문제는 TypeScript와 관련된 것으로, 여기에 이미 게재되어 있는 솔루션과 비슷하지만 완전히 동일하지는 않습니다.

뭐가 잘못됐나요?

소스코드가 포함된 중첩된 디렉토리를 추가했는데, 이 디렉토리는 이 디렉토리에 포함되지 않았습니다.tsconfig.json.

해결 방법

수정 방법은 다음과 같습니다.단순히 추가해서.ts그리고..tsx예를 들어, 포함할 경로.

// tsconfig.json
{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
    "<path-to-your-source>.ts",
    "<path-to-your-source>.tsx",
  ],
}

저의 특별한 프로젝트는 Next.js 프로젝트입니다.배불러요tsconfig.json:

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

상기의 대부분은tsconfig.jsonNext.js를 통해 생성되었습니다.

내 경우엔 이것과 아무 관련이 없었다.

저는 Visual Studio Code를 사용하고 있었습니다만, 루트에 tsconfig.json 파일이 있는 폴더가 아니라, 내부의 한 레벨의 src 폴더에 있는 폴더를 열었습니다.

오류가 발생했습니다.Parsing error: Cannot read file :C\MyProject\tsconfig.json.eslint

그래서 간접적으로'React' refers to a UMD global, but the current file is a module

프로젝트 수준에서 폴더를 다시 열면 문제가 해결되었습니다.:\

파일 tsconfig.json을 확인합니다.

"compilerOptions": {
    ...
    "baseUrl": "src",
    ...
    "jsx": "react-jsx",
    ...
 },

VS 코드로 타이프 스크립트서버를 새로고침 하려면 , 다음의 순서에 따릅니다.

Ctrl+Shift+P(macOS의 경우 Cmd+Shift+P)를 눌러 명령 팔레트를 열고 restart를 입력한 다음 "TypeScript:TS 서버를 재기동합니다.

VSCode 사용자의 경우 프로젝트를 닫았다가 다시 여는 것만으로 문제가 해결되었습니다.

이 문제에 부딪혔을 때 tsconfig.json을 변경하는 것은 ts-jest가 설정되어 있으면 동작하지 않는다는 것을 깨달았습니다.ts-jest가 다음과 같이 설정되어 있는지 확인합니다.

module.exports = {
  ...
  globals: {
    ...
    "ts-jest": {
      ...
      tsconfig: {
        ...
        jsx: "react-jsx", // *** HERE ***
        ...
      },
    },
  },
  ...
};

VS Code에서는 타이프 스크립트 서버를 재기동할 필요가 있었습니다.git 브랜치를 많이 바꾸었는데, 변경사항이 없는 파일에서 예상치 못한 오류가 발생하였습니다.이 에러를 트리거 할 수 있는 다른 변경은 없었습니다.새로고침 후 오류가 사라졌습니다.

VS 코드로 타이프 스크립트서버를 새로고침 하려면 , 다음의 순서에 따릅니다.

++(ShiftPCmdShiftPmacOS의 경우 ++)를 눌러 명령 팔레트를 열고 입력합니다.restart그런 다음 "TypeScript: TS 서버를 재기동합니다.

Create React App을 사용하여 src 폴더가 아닌 프로젝트의 루트에 파일이 있을 때 이 현상이 발생하였습니다.

프로젝트에 사용되는 버전에 따라 다음 형식이 필요할 수 있습니다.

import * as React from "react"

는 제가 건넸을 때 했습니다.index.ts컴포넌트 이름

└── components/
    └── Dialog/
        ├── Dialog.tsx
        └── Dialog.ts // This needs to be index.ts

을 름름 changing changing changing로 되돌리다index.ts결했습습니니다

언급URL : https://stackoverflow.com/questions/64656055/react-refers-to-a-umd-global-but-the-current-file-is-a-module