2

I am trying to create a new react app:

yarn create react-app my-app --template typescript

Installation seems to work fine, but when I try to yarn start the app, I get an error:

C:\...\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239 appTsConfig.compilerOptions[option] = value; ^

TypeError: Cannot assign to read only property 'jsx' of object '#' at verifyTypeScriptSetup (C:\...\my-app\node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js:239:43) at Object. (C:\...\my-app\node_modules\react-scripts\scripts\start.js:31:1) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

There seems to be a problem with peer dependencies. check-peer-dependencies lists unmet peer dependencies:

❌  @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires type-fest ^0.13.1 (0.8.1 is installed) 
❌  @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires webpack-hot-middleware 2.x (webpack-hot-middleware is not installed) 
❌  @pmmmwh/react-refresh-webpack-plugin@0.4.2 requires webpack-plugin-serve 0.x || 1.x (webpack-plugin-serve is not installed) 
❌  jest-config@26.6.1 requires ts-node >=9.0.0 (ts-node is not installed) 
❌  jsdom@16.4.0 requires canvas ^2.5.0 (canvas is not installed) 
❌  react-scripts@4.0.0 requires typescript ^3.2.1 (4.1.2 is installed) 
❌  sass-loader@8.0.2 requires fibers >= 3.1.0 (fibers is not installed) 
❌  sass-loader@8.0.2 requires node-sass ^4.0.0 (node-sass is not installed) 
❌  sass-loader@8.0.2 requires sass ^1.3.0 (sass is not installed) 
❌  ws@7.3.1 requires bufferutil ^4.0.1 (bufferutil is not installed) 
❌  ws@7.3.1 requires utf-8-validate ^5.0.2 (utf-8-validate is not installed)

After I add the unmet dependencies another error is thrown:

error TS6046: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.

After I changed the value of from jsx": "react-jsx" to jsx": "react" in tsconfig.json I can finally start the app.

The errors happen with npx create-react-app as well. I tried to run the commands on windows 10 and linux - no differences.

What am I missing?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
FelHa
  • 1,043
  • 11
  • 24

1 Answers1

2

donavon recommends a temporary solution:

create a file in the root of your project:

//verifyTypeScriptSetup.js
"use strict";
function verifyTypeScriptSetup () {}
module.exports = verifyTypeScriptSetup;

add a prestart in your package.json scripts

"prestart": "cp verifyTypeScriptSetup.js node_modules/react-scripts/scripts/utils",

I share the link with the solution https://github.com/facebook/create-react-app/issues/9868#issuecomment-731396876

Brian
  • 1,295
  • 14
  • 25