React 17 JSX, react-scripts with TypeScript

With new React 17 offers JSX, it's mean no longer needs to import React on every page read more

In the React 16:

import React from "react";

export default function TestPara() {
  return (
    <React.Fragment>
      <h1>I love FOSS</h1>
    </React.Fragment>
  );
}

In the React 17:

import { Fragment } from "react";

export default function TestPara() {
  return (
    <Fragment>
      <h1>I love FOSS</h1>
    </Fragment>
  );
}

According to this post If you use TypeScript rather than JavaScript, you must switch to 4.1.0-beta

yarn add typescript@beta

Then make a change in tsconfig.json look like this:

"jsx": "react-jsx"

After switching to 4.1.0-beta react-scripts will give this error:

.../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (.../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (.../node_modules/react-scripts/scripts/start.js:31:1)
...

Now you have two options.
Option 1
You can wait for the react-scripts 4.0.1 which comes with this pull.

Option 2
If you can't wait for 4.0.1 like me, you can do this fix:

change this code block in node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

    let result;
    parsedTsConfig = immer(readTsConfig, config => {
      result = ts.parseJsonConfigFileContent(
        config,
        ts.sys,
        path.dirname(paths.appTsConfig)
      );
    });

Like this:

    parsedTsConfig = {...readTsConfig};

    const result = ts.parseJsonConfigFileContent(
      parsedTsConfig,
      ts.sys,
      path.dirname(paths.appTsConfig)
    );

Congratulations you now successfully fix the issue...!!

Comments

[Alex]

was just testing the new rel as got a bump on GH and found this bug, it's incredible that a thing like this slipped through the release

[xe-non]

So how is this happened? 🤔

[Alex]

I guess we should ask the react team, not me :D

[xe-non]

Or we can wait till react script 4.0.1 😜

[Alex]

there's no other choice :D actually found a bug as well that makes whole TS 4 incompatible with older(recent) versions of eslint 😒 so had to downgrade that too to 3.9.7 😄 not a big deal but lost a lot of time figuring out

[xe-non]

TS 4.1 released on yesterday so don't worry keep waiting everything will all right 😌

[Andrei Abramchuk]

How is it possible? Do they release a new version without simple start tests?

[xe-non]

I think so

[waldenylson]

Thanks man, you have saved my life...

[xe-non]

Your welcome 😃