TheLazy.Dev
Portfolio GitHub

Blog

react |typescript |reactscripts

React 17 JSX, react-scripts with TypeScript

sithumonline

xe-non

Posted on October 29, 2020

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

In the React 17:

import { Fragment } from "react";

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

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

yarn add typescript@beta
Enter fullscreen mode Exit fullscreen mode

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

"jsx": "react-jsx"
Enter fullscreen mode Exit fullscreen mode

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)
...
Enter fullscreen mode Exit fullscreen mode

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)
      );
    });
Enter fullscreen mode Exit fullscreen mode

Like this:

    parsedTsConfig = {...readTsConfig};

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

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

💖 💪 🙅 🚩
sithumonline
xe-non

Posted on October 29, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React 17 JSX, react-scripts with TypeScript
react React 17 JSX, react-scripts with TypeScript

October 29, 2020