DEV Community

loading...
Cover image for React 17 JSX, react-scripts with TypeScript

React 17 JSX, react-scripts with TypeScript

ebonynon profile image xe-non ・2 min read

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

Discussion

pic
Editor guide
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
ebonynon profile image
xe-non Author

So how is this happened? 🤔

Collapse
buaiscia profile image
Alex

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

Thread Thread
ebonynon profile image
xe-non Author

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
ebonynon profile image
xe-non Author

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
ebonynon profile image
xe-non Author

I think so

Collapse
waldenylson profile image
waldenylson

Thanks man, you have saved my life...

Collapse
ebonynon profile image
xe-non Author

Your welcome 😃