bug: react build breaks on upgrade to 17 - compiler options set to react-jsx and this is not recognized

[peterennis]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

Expected behavior:

Steps to reproduce:

upgrade Ionic React tutorial demo to use React 17

Related code:

insert short code snippets here

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.11.12 (C:\Users\peter\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.5.0

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.3

Utility:

   cordova-res : 0.15.1
   native-run  : 1.2.1

System:

   NodeJS : v14.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

Ref: facebook/create-react-app#9429

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[peterennis]

Repo: https://github.com/peterennis/tutorial-photo-gallery-react

Note: If I run npm run-script build it will generate a prod build that can be run with serve and it works.

Ionic:

   Ionic CLI       : 6.11.12 (C:\Users\peter\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.5.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.4.3

Utility:

   cordova-res : 0.15.1
   native-run  : 1.2.1

System:

   NodeJS : v14.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

[peterennis]

@elylucas repro provided above

[elylucas]

Hi @peterennis,

I think this might be an issue that was recently fixed in react-scripts@4.0.1 (see facebook/create-react-app#9868). Could you try npm i react-scripts@latest and give it a try again? If that doesn't work, try clearing your node modules and also installing the latest types for @types/react and @types/react-dom.

Thanks

[elylucas]

Also, for that error in VSCode, make sure you are using the project version (should be 4.1.2 or greater, if not upgrade TS) and not the version that comes with VSCode.

[peterennis]

@elylucas
Upgrade worked.
VSCode error resolved.
Here: https://github.com/peterennis/tutorial-photo-gallery-react
Failed npm test choosing to run all tests:

[liamdebeasi]

Thanks for the issue! The remaining issue here appears to be related to Jest's lack of support for ES Modules. We have an open issue at #24026 which is being used to track how to account for this in Ionic apps.

Until Jest ships support for ES Modules , we recommend using transformIgnorePatterns to have @ionic/react-hooks get transpiled down to Common JS: https://jestjs.io/docs/configuration#transformignorepatterns-arraystring.

We will post any updates in #24026. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.