DEV Community

Cover image for React 17 JSX, react-scripts with TypeScript
xe-non
xe-non

Posted on

React 17 JSX, react-scripts with TypeScript

#react #typescript #reactscripts

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...!!

Top comments (10)

Collapse
 
buaiscia profile image
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

Collapse
 
sithumonline profile image
xe-non •

So how is this happened? 🤔

Collapse
 
buaiscia profile image
Alex •

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

Thread Thread
 
sithumonline profile image
xe-non •

Or we can wait till react script 4.0.1 😜

Thread Thread
 
buaiscia profile image
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

Thread Thread
 
sithumonline profile image
xe-non • • Edited

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

Collapse
 
tastypurgen profile image
Andrei Abramchuk •

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

Collapse
 
sithumonline profile image
xe-non •

I think so

Collapse
 
waldenylson profile image
waldenylson •

Thanks man, you have saved my life...

Collapse
 
sithumonline profile image
xe-non •

Your welcome 😃