javascript - 'React' viittaa UMD-globaaliin, mutta nykyinen tiedosto on moduuli

Päivitin projektini luomaan React-sovelluksen versioon 4.0, ja siirrän hitaasti tiedostojani TypeScriptiin. Tiedän, että tässä uudessa versiossa Reactia ei tarvitse tuoda toistuvasti import React from 'react'. Kuitenkin kaikissa TS-tiedostoissani, joissa en tuo Reactia, saan tämän virheen:

'React' viittaa UMD-globaaliin, mutta nykyinen tiedosto on moduuli. Harkitse importin lisäämistä sen sijaan.ts(2686)`

Tiedän, että voin korjata sen tuomalla Reactin, mutta luulin, että tätä ei enää tarvittu. Voisiko myös joku selittää tämän virheen merkityksen?

Perus TSX-tiedostoni

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

export default Users;

Vastaus #1

Create React App tukee uutta JSX-muunnosta suoraan version 4 mukana, mutta jos käytät mukautettua asetusta, seuraavaa tarvitaan poistaaksesi TypeScript-virheen kirjoittaessasi jsx ilman import React from 'react':

  • vähintään version 4.1 typescript
  • vähintään version 17 react ja react-dom
  • tsconfig.json-tiedostossa täytyy olla jsx-kääntäjäasetuksena react-jsx tai react-jsxdev

esimerkki :

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

TypeScriptin dokumentaatio sen React 17 JSX -tehdastehtävien tuesta löytyy täältä

Vastaus #2

Lisääminen

import React from 'react'

korjaa tämän ongelman

Vastaus #3

Tämä virheilmoitus tulee TypeScript-kääntäjältä. React 17:n uusi jsx-muunnos ei ole tällä hetkellä tuettu TypeScript 4.0:ssa, ja se tulee tuetuksi versiosta 4.1 alkaen.

TypeScript v4.1 Beta - React 17 JSX -tehtaat

Vastaus #4

Mitä Dan kirjoitti on oikein, voit muuttaa tsconfig.json:

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

Tai tuo vain React sen tiedoston Component sisälle, joka antaa sinulle virheen:

import React from 'react'

Vastaus #5

Ongelmani tässä liittyi TypeScriptiin ja oli samanlainen, mutta ei täysin sama kuin ne ratkaisut, jotka on jo julkaistu täällä.

Mikä oli vialla

Lisäsin sisäkkäisiä hakemistoja lähdekoodilla, joita ei ollut mukaan otettu minun tsconfig.json-tiedostossani.

Ratkaisu

Näin korjasin sen, yksinkertaisesti lisäämällä lisäpolkuja .ts ja .tsx mukaan, esimerkiksi.

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

Oma projektini on Next.js-projekti. Tässä on koko tsconfig.json -tiedostoni:

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

Suuri osa yllä olevasta tsconfig.json-tiedostosta on luotu Next.js:n avulla

Vastaus #6

VSCode-käyttäjille macOS:ssä projektin yksinkertainen sulkeminen ja uudelleen avaaminen korjasi ongelman minun kohdallani.

Vastaus #7

Korjasin sen käyttämällä tätä:

{
  ...
  "compilerOptions": {
     ...
    "jsx": "react",
    "allowUmdGlobalAccess": true,
  }
}

Vastaus #8

Tarkista tiedostosi tsconfig.json

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

TypeScript-palvelimen uudelleenlataaminen VS Codessa:

Paina Ctrl+Shift+P (Cmd+Shift+P macOS:ssä) avataksesi komentopaletti ja kirjoita restart, sitten valitse komento "TypeScript: Restart TS server".

Aiheeseen liittyviä artikkeleita