title: create-react-app typescript won't run npm start
body: <p>I am trying to <code>create-react-app</code> with typescript, but there seems to be a problem with JSX and TS. I read a couple of possible solutions, that didn't work out for me.</p>
  <p>I have:</p>
  <ul>
  <li>npm: version 16.14.7</li>
  <li>node: version 14.8.0</li>
  </ul>
  <p>I used <code>npx create-react-app my-app --template typescript</code> from the <a href="https://create-react-app.dev/docs/adding-typescript/#installation" rel="nofollow noreferrer">docs</a></p>
  <p>The installation went fine, but when I try to run <code>npm start</code> it gives me this error:</p>
  <pre><code>&gt; my-app@0.1.0 start /Users/lukasbenediktson/Desktop/react-types/my-app
  &gt; react-scripts start
  
  /Users/lukasbenediktson/Desktop/react-types/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 '#&lt;Object&gt;'
      at verifyTypeScriptSetup (/Users/lukasbenediktson/Desktop/react-types/my-app/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
      at Object.&lt;anonymous&gt; (/Users/lukasbenediktson/Desktop/react-types/my-app/node_modules/react-scripts/scripts/start.js:31:1)
      at Module._compile (internal/modules/cjs/loader.js:1251:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1272:10)
      at Module.load (internal/modules/cjs/loader.js:1100:32)
      at Function.Module._load (internal/modules/cjs/loader.js:962:14)
      at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
      at internal/main/run_main_module.js:17:47
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! my-app@0.1.0 start: `react-scripts start`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the my-app@0.1.0 start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  </code></pre>
  <p>I tried to change this line 238 in <code>node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js</code> as <a href="https://github.com/facebook/create-react-app/issues/9868#issuecomment-723576740" rel="nofollow noreferrer">suggested by tudor07 here</a>:</p>
  <pre><code>} else if (parsedCompilerOptions[option] !== valueToCheck) {
  </code></pre>
  <p>to</p>
  <pre><code>} else if (parsedCompilerOptions[option] !== valueToCheck &amp;&amp; option !== &quot;jsx&quot;) {
  </code></pre>
  <p>and that let me run <code>npm start</code> and the server is up and running. But it now reveals that it won't recognize JSX/TSX:</p>
  <pre><code>TypeScript error in /Users/lukasbenediktson/Desktop/react-types/my-app/src/App.tsx(7,5):
  Could not find a declaration file for module 'react/jsx-runtime'. '/Users/lukasbenediktson/Desktop/react-types/my-app/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.
    If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`  TS7016
  
       5 | function App() {
       6 |   return (
    &gt;  7 |     &lt;div className=&quot;App&quot;&gt;
         |     ^
       8 |       &lt;header className=&quot;App-header&quot;&gt;
       9 |         &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
      10 |         &lt;p&gt;
  </code></pre>
  <p>My <code>package.json</code> looks like this:</p>
  <pre><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.0&quot;,
      &quot;typescript&quot;: &quot;^4.0.3&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
      &quot;@types/node&quot;: &quot;^12.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.9.53&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>
  <p>Thank you for your time.</p>
  <p><strong>UPDATE: SOLUTION (for me at least)</strong></p>
  <p>In my <code>tsconfig.json</code> I changed the my <code>&quot;compilerOptions&quot;:</code> from <code>&quot;jsx&quot;: &quot;react-jsx&quot;</code> to <code>&quot;jsx&quot;: &quot;react&quot;</code>. Notice that I still needed to make a change on line 238 in my <code>node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js</code> as <a href="https://github.com/facebook/create-react-app/issues/9868#issuecomment-723576740" rel="nofollow noreferrer">suggested by tudor07 here</a></p>
  <p>Please let me know if it's too &quot;hacky&quot;</p>