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 (10)

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 😃