Support create-react-app/react-scripts 4

[ggascoigne]

I'm not sure what part of the system causes things to break, but using create-react-app 4 seems to effectively disable why-did-you-render.

Switching back to react-scripts 3.4.4 fixes things.

[vzaidman]

React 17 support is incoming in version 6 which is in progress.
#155

[ggascoigne]

I saw that, but cra 4 also breaks with react 16.

[FezVrasta]

Probably you are using the new JSX transform, I don't think it's supported right now.

[vzaidman]

" cra 4 also breaks with react 16."
react 16 is not supported with the new JSX transform right?

[FezVrasta]

It is, they released a new version to support it.

[vzaidman]

oh right right. i hope ill get to fixing it asap

[vzaidman]

Can you please try version v6.0.0-rc.1 ?
@ggascoigne @FezVrasta
I'm about to release it.
notice in the readme how it has to be installed to support the new jsx transformation:
https://github.com/welldone-software/why-did-you-render#setup

EDIT: This is a good idea, but can't be implemented in CRA4.

[FezVrasta]

How can I import it before react hot loader in Create React App?

[vzaidman]

It seems to me like the library will not currently support CRA.
even react-app-rewired can't help...

[vzaidman]

sadly, CRA is not flexible enough to support the patching of the new JSX transformation.
this means you can either eject or run without it by changing the start script in package.json:

    "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",

[FezVrasta]

Any chance you could use Babel macros to overcome the limitation?

[mrlubos]

Hi @vzaidman, wondering what's the issue with CRA everyone is mentioning here? The new React update should be concerned only with the JSX factory, no? What changed in CRA?

[vzaidman]

it's seems to be kind of impossible to reconfigure it's webpack and babel.
we used to use tools like react-app-rewired, but they don't work anymore:
timarney/react-app-rewired#500

And it's needed in order to use WDYR with the new JSX.
Also with react-redux: #85