5
votes

Obtention d'erreur: «Tous les fichiers doivent être des modules lorsque l'indicateur '--isolatedModules' est fourni» dans React avec TypeScript

Je n'arrive pas à me débarrasser de cette erreur. J'utilise create-react-app avec TypeScript. Toute aide, appréciée. Merci.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ],
  "extends": "./tsconfig.base.json"
}

Ce sont mes fichiers tsconfig. J'ai créé un fichier de base car le fichier tsconfig d'origine est écrasé par les scripts de build react.

tsconfig.base.json

{
    "compilerOptions": {
        "isolatedModules": false
    }
}

tsconfig.json

All files must be modules when the '--isolatedModules' flag is provided.  TS1208

  > 1 | import randomcolor from 'randomcolor';
      | ^
    2 | import React from 'react';
    3 | import tasksData from '../../assets/data/tasksData';
    4 | import { Task } from '../../model/task';

reactjs typescript

4 commentaires

Je n'en ai aucune idée, mais j'ai cherché sur le Web et j'ai trouvé github.com/facebook/create-react-app/issues/6054 , qui m'a dirigé vers github.com/Microsoft/TypeScript/issues/21194 , alors: suivez-vous correctement règles dactylographiées dans le code de randomcolor ?

Veuillez NE PAS utiliser d'images pour le code. Publiez le code réel. Nous devons le voir

@JonathanAlfaro Noté, merci.

@ Mike'Pomax'Kamermans randomcolor est un package npm. Je soupçonne qu'il ne suit pas les règles correctes, mais j'aimerais arrêter cette erreur de se propager à la construction. npmjs.com/package/randomcolor

6 Réponses :

1
votes

Assurez-vous que tout ce que vous importez est exporté à partir de ce chemin.

S'il est spécifique à l'importation de randomcolor , assurez-vous d'ajouter également les types pour ce package en installant @types/randomcolor

npm

yarn add @types/randomcolor

fil

npm i @types/randomcolor

4 commentaires

Merci, mais j'ai les types installés.

Y a-t-il une raison pour laquelle vous définissez isolatedModules sur true dans votre tsconfig.json puis sur false dans votre base? Une raison pour laquelle vous devez étendre ce paramètre?

Les scripts de réaction écrasent le fichier tsconfig au moment de la construction. J'ai créé un fichier de base en pensant que je pourrais peut-être éteindre les modules isolés mais pas de chance

Pour moi, il manquait une exportation pour une fonction dans un fichier.

13
votes

Peut obtenir cette erreur avec un fichier .ts ou .tsx inutilisé. J'avais .ts fichier .ts vide .ts je n'utilisais pas, alors je devais simplement supprimer le fichier inutilisé.

supprimé le fichier inutilisé /example/index.ts

0 commentaires

0
votes

peut-être que le composant de couleur aléatoire a un nom répété ou des liens à l'intérieur, ou vous en avez un autre avec le même composant de nom

0 commentaires

6
votes

Le problème est que dans Typescript, par défaut, chaque fichier sans import ou export est un fichier script hérité.

Comme ces fichiers ne sont pas des modules, ils sont fusionnés dans l'espace de noms global.

Pour changer ce comportement

a) ajoutez n'importe quelle importation ou exportation dans le fichier, par exemple: export {}

b) définir "isolatedModules": false dans tsconfig.json

Remarque : NextJS réinitialisera la valeur à true dans chaque build, car pour NextJS, "isolatedModules": true est une exigence

2 commentaires

L'exportation vide a résolu mon problème. Cependant, étonnamment, le réglage de isolatedModules sur true n'aide pas.

@webpreneur, car vous devez le définir sur "false"

1
votes

il n'y a pas d'export dans le fichier!

par exemple, vous pouvez ajouter export default {} à fixed!

1 commentaires

Les informations fournies ne suffisent pas. Veuillez fournir plus d'informations afin que nous puissions vous aider.

0
votes

J'obtenais la même erreur. Mais voir une solution mentionnée ci-dessus dactylographié nécessite une importation / exportation . J'ai ajouté seulement cette ligne

import bgps from '../../resources/bgps.png';

Puis l'erreur a disparu. donc même s'il s'agit d'un fichier qui ne nécessite aucune importation, conservez un fichier image inutilisé. bien que cela provoquera un avertissement dans le journal de la console

le jour suivant, j'ai aussi eu la même erreur! Code VS fermé, ouvert à nouveau et bang! c'était encore bien

0 commentaires