reactjs - TS-uttrykk produserer en foreningstype som er for kompleks til å representeres med Material-UI og @react-three/fiber

Jeg lager en Next.js-applikasjon som bruker Material-UI og @react-three/fiber-biblioteket.

Jeg har nylig oppgradert Material-UI til V5, og en feil har dukket opp.

Her er feilen:

Jeg søker overalt for å fjerne det, men jeg fant ingenting.

Så jeg prøver å lage et nytt prosjekt med Material-UI V5 og jeg installerer andre avhengigheter én etter én. I begynnelsen vises ikke feilen, men når jeg installerer @react-three/fiber OG @react-three/drei dukker feilen opp.

Så jeg fant ut at en Box-komponent eksporteres fra @material-ui og @react-three/drei, så jeg forstår feilen nå.

Her er min package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-beta.2",
    "@material-ui/styles": "^4.11.4",
    "@react-three/fiber": "^7.0.6",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.16",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

Min tsconfig.json

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

Men jeg finner ikke hvordan jeg skal fikse det...

Noen har idé?

Svar #1

Løsning 1

Den stabile versjonen av MaterialUI fikser dette problemet.

Bruk denne pakken:

npm install @mui/material

Løsning 2 av Vivere

Legg til component-egenskapene til en div for å unngå TypeScript-feil.

<Box component="div">...</Box>

Svar #2

Jeg hadde den samme feilen på grunn av importering av @react-three/drei. Jeg har med suksess lokalisert filer, som får feilen til å dukke opp, men jeg klarer ikke å finne årsaken. Jeg ville sette pris på all innspill fra folk som kan mer om TypeScript.

Dette er en ganske stygg løsning. Slett alle disse definisjonsfilene:

  • node_modules/@react-three/drei/core/

    • MeshWobbleMaterial.d.ts
    • MeshDistortMaterial.d.ts
    • PointMaterial.d.ts (<- for nyere versjoner)

Selvfølgelig kan du ikke bruke disse komponentene i en Typescript-kontekst nå.

Du kan dele og pinne disse endringene ved å bruke patch-package. Dette vil sette opp et etter installasjon-steg, som vil bruke endringene (slettede filer) etter å ha kjørt npm/yarn install.

Relaterte artikler