Quiero actualizar react-scripts a la próxima versión ( 4.0.0 ) para poder usar la función de actualización rápida usando esta guía aquí . Pero al reiniciar el servidor, el script no funciona debido al siguiente error:
$ 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.Tuve exactamente el mismo problema cuando traté de comenzar a usar TypeScript en mi proyecto de reacción, lo que resolvió el problema es usar los siguientes paquetes con estas versiones específicas en mi package.json
"react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "typescript": "^4.1.2", Y este archivo tsconfig.json
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] }Esto se puede solucionar habilitando la opción noFallthroughCasesInSwitch en su tsconfig.json . Consulte la discusión aquí para obtener más información.
{ "compilerOptions": { "noFallthroughCasesInSwitch": true, ... }, ... } Para cualquier persona curiosa, la solución anterior no corrige el error. Simplemente omite ejecutar el código con errores a continuación, que asignará el valor sugerido a la opción del compilador de mecanografiado si no se proporciona. El tsconfig.json generado a partir react-scripts de forma predeterminada no tiene la opción noFallthroughCasesInSwitch . Agregar esa opción elimina la necesidad de ejecutar el código.
// 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 ... } }EDITAR:
Si el script falla con otras opciones y tiene el mismo seguimiento de pila que el de mi pregunta, debe verificar si faltan las siguientes opciones del compilador en su tsconfig.json
Estos son los valores sugeridos para la opción del compilador TypeScript cuando no se especifica en 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' }, }; Debe agregar explícitamente esas opciones a su tsconfig.json para que la secuencia de comandos pueda omitir la rama con errores y evitar fallas.
Apliqué:
rm -rf yarn.lock rm -rf tsconfig.json Luego reinstalé con el comando yarn .
Por último, yarn start .
De esta manera, creé el nuevo archivo predeterminado tsconfig.json y el archivo yarn.lock .