CODEWITHSUNDEEP
reactjstypescriptcreate-react-appyarnpkg
FelHa
FelHa

Reputation: 1103

yarn create react-app with typescript throwing errors

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/[email protected] requires type-fest ^0.13.1 (0.8.1 is installed) 
❌  @pmmmwh/[email protected] requires webpack-hot-middleware 2.x (webpack-hot-middleware is not installed) 
❌  @pmmmwh/[email protected] requires webpack-plugin-serve 0.x || 1.x (webpack-plugin-serve is not installed) 
❌  [email protected] requires ts-node >=9.0.0 (ts-node is not installed) 
❌  [email protected] requires canvas ^2.5.0 (canvas is not installed) 
❌  [email protected] requires typescript ^3.2.1 (4.1.2 is installed) 
❌  [email protected] requires fibers >= 3.1.0 (fibers is not installed) 
❌  [email protected] requires node-sass ^4.0.0 (node-sass is not installed) 
❌  [email protected] requires sass ^1.3.0 (sass is not installed) 
❌  [email protected] requires bufferutil ^4.0.1 (bufferutil is not installed) 
❌  [email protected] 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?

Upvotes: 2

Views: 2833

Answers (1)

Brian
Brian

Reputation: 1324

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

Upvotes: 2

Related Questions