web-dev-qa-db-fra.com

TS Expression produit un type syndical trop complexe pour représenter avec Matériel-UI et @ React-Three / Fibre

Je crée une application NEXT.JS utilisant la bibliothèque Matériel-UI et @ React-Three/Fiber.

Je passais récemment le matériel-UI à V5 et une erreur apparaît.

Voici l'erreur: -error

Je cherche tout pour le supprimer mais je n'ai rien trouvé.

J'essaie donc de créer un nouveau projet avec Matériel-UI V5 et j'installe une autre dépendance une à une. Au début, l'erreur n'est pas montrée mais quand j'installe @react-three/fiber ET @react-three/drei L'erreur apparaît.

J'ai donc trouvé qu'un composant Box est exporté de @material-ui et @react-three/drei Je comprends donc maintenant l'erreur.

Voici mon 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"
  }
}

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

Mais je n'ai pas trouvé comment le réparer ...

Quelqu'un a de l'idée?

reactjstypescriptthree.jsmaterial-uireact-three-fiber
3
Melvynx

Solution 1

La version stable de Materialui corrige ce problème.

Utilisez ce paquet:

npm install @mui/material

Solution 2 par Vivere

Ajoutez les appels component à un div pour éviter l'erreur dossée.

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

J'ai eu la même erreur en raison de l'importation @react-three/drei. J'ai des fichiers localisés avec succès, qui provoquent l'erreur d'apparaître mais je suis incapable de déterminer la cause première. J'apprécierais toutes les contributions de personnes plus douteuses-avertisseurs là-bas.

C'est une solution de contournement plutôt laid. Supprimer tous ces fichiers de définition:

  • node_modules/@react-three/drei/core/
    • MeshWobbleMaterial.d.ts
    • MeshDistortMaterial.d.ts
    • PointMaterial.d.ts (<- pour les versions plus récentes)

Bien sûr, vous ne pouvez pas utiliser ces composants dans un contexte dossier maintenant.

Vous pouvez partager et code PIN Ces modifications à l'aide de Patch-package . Cela configurera A Post Installer Étape, qui appliquera les modifications (fichiers supprimés) après avoir exécuté npm/yarn install.

0
Inuniku