'Support for the experimental syntax 'jsx' isn't currently enabled when upgrading from Babel 6 to Babel 7

I'm trying to upgrade the react-text-mask library to Babel 7 and React 17.

For that I forked: https://github.com/text-mask/text-mask

here: https://github.com/tlg-265/react-text-mask-react-17

and then I tried to upgrade Babel with the following command:

$ npx babel-upgrade --write

You can easily install it by doing this:

$ git clone https://github.com/tlg-265/react-text-mask-react-17
$ cd react-text-mask-react-17
$ npm i

My problem is: When I run it with:

$ npm run react:dev

I get this error:

Support for the experimental syntax 'jsx' isn't currently enabled

as you can see here:

ERROR in ./react/example/index.js
Module build failed: SyntaxError: C:\react-text-mask-react-17\react\example\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:3):

  4 |
  5 | ReactDOM.render(
> 6 |   <App/>,
    |   ^
  7 |   document.querySelector('#content')
  8 | )
  9 |

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at instantiate (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:72:32)
    at constructor (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:358:12)
    at Parser.raise (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:3334:19)
    at Parser.expectOnePlugin (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:3391:18)
    at Parser.parseExprAtom (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:12969:18)
    at Parser.parseExprSubscripts (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:12539:23)
    at Parser.parseUpdate (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:12518:21)
    at Parser.parseMaybeUnary (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:12489:23)
    at Parser.parseMaybeUnaryOrPrivate (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:12283:61)
    at Parser.parseExprOps (C:\react-text-mask-react-17\node_modules\@babel\parser\lib\index.js:12290:23)
 @ multi main
webpack: Failed to compile.

Any idea on how to make it work?

My system is as follows:

$ node -v
v12.16.1

$ npm -v
6.14.8

Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source