reactjs - Erreur lors de la mise à jour de create-react-app vers 4.0 avec le modèle typescript

Je veux mettre à jour react-scripts vers la version suivante (4.0.0) afin de pouvoir utiliser la fonctionnalité de rafraîchissement rapide en suivant ce guide ici. Mais en redémarrant le serveur, le script ne fonctionne pas à cause de l'erreur ci-dessous :

yarn start
yarn run v1.22.4
react-scripts start
E:\Github\Web\so-rank\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:210
        appTsConfig.compilerOptions[option] = suggested;
                                            ^

TypeError: Cannot add property noFallthroughCasesInSwitch, object is not extensible
    at verifyTypeScriptSetup (E:\Github\Web\so-rank\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:210:45)
    at Object.<anonymous> (E:\Github\Web\so-rank\node_modules\react-scripts\scripts\start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.

Réponse #1

Cela peut être corrigé en activant l'option noFallthroughCasesInSwitch dans votre tsconfig.json. Consultez la discussion ici pour plus d'informations.

{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true,
    ...
  },
  ...
}

Pour ceux qui sont curieux, la solution ci-dessus ne corrige pas le bogue. Elle se contente de passer l'exécution du code bogué ci-dessous, qui attribuera la valeur suggérée à l'option du compilateur TypeScript si elle n'est pas fournie. Le tsconfig.json généré par défaut à partir de react-scripts n'a pas l'option noFallthroughCasesInSwitch. Ajouter cette option supprime la nécessité d'exécuter le code.

// Some options when not present in the tsconfig.json will be assigned
// a suggested value which crashes the program
if (suggested != null) {
  if (parsedCompilerOptions[option] === undefined) {
    appTsConfig.compilerOptions[option] = suggested; // error here
    ...
  }
} 

MODIFICATION :

Si le script plante avec d'autres options et que vous avez la même trace de pile que celle dans ma question, vous devriez vérifier si les options du compilateur suivantes manquent dans votre tsconfig.json

Voici les valeurs suggérées pour l'option du compilateur Typescript lorsqu'elles ne sont pas spécifiées dans le tsconfig.json

const compilerOptions = {
  // These are suggested values and will be set when not present in the
  // tsconfig.json
  target: {
    parsedValue: ts.ScriptTarget.ES5,
    suggested: 'es5',
  },
  lib: { suggested: ['dom', 'dom.iterable', 'esnext'] },
  allowJs: { suggested: true },
  skipLibCheck: { suggested: true },
  esModuleInterop: { suggested: true },
  allowSyntheticDefaultImports: { suggested: true },
  strict: { suggested: true },
  forceConsistentCasingInFileNames: { suggested: true },
  noFallthroughCasesInSwitch: { suggested: true },
  module: {
    parsedValue: ts.ModuleKind.ESNext,
    value: 'esnext',
    reason: 'for import() and import/export',
  },
  moduleResolution: {
    parsedValue: ts.ModuleResolutionKind.NodeJs,
    value: 'node',
    reason: 'to match webpack resolution',
  },
  resolveJsonModule: { value: true, reason: 'to match webpack loader' },
  isolatedModules: { value: true, reason: 'implementation limitation' },
  noEmit: { value: true },
  jsx: {
    parsedValue: ts.JsxEmit.React,
    suggested: 'react',
  },
  paths: { value: undefined, reason: 'aliased imports are not supported' },
};

Vous devez ajouter explicitement ces options à votre tsconfig.json afin que le script puisse passer la branche boguée et éviter de planter.

Réponse #2

J'ai postulé :

rm -rf yarn.lock
rm -rf tsconfig.json

Ensuite, j'ai réinstallé avec la commande yarn.

Enfin, yarn start.

De cette façon, j'ai créé le nouveau fichier par défaut tsconfig.json et le fichier yarn.lock.