Crash after migrating webpack 4 -> 5 with new JSX transforms

[delyanr]

Hello. I'm in the process of migrating from webpack@4 to webpack@5. After doing so, I started getting an uncaught TypeError from why-did-you-render.

I believe this is also connected with the latest React JSX transform (I'm using react@16.14). At the top of the file I have:

import * as React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

If I revert back to webpack@4 and keep the latest JSX transform - it works.
If I keep webpack@5 and revert back to the old React imports - it works.
If I use both together - I get the crash above.

Thanks!

[vzaidman]

related to #85.
i hope it's possible to solve in the first place. ill look at it asap

[vzaidman]

@delyanr, can you please try importing React as:

import React from 'react';

I reproduced the issue and solved it with this change here:
vzaidman/react-webpack5-typescript-with-wdyr@547dbf1

[delyanr]

@vzaidman, yes this stops the crash. As per my original post, also webpack@4 with the new JSX transforms does NOT crash either. However, after retaining webpack@4 and migrating to the new JSX transforms, why-did-you-render no longer reports anything in the console (basically stopped working for me).

Finally, I don't believe changing the imports is the right solution here anyway, since the React team is likely to change the behavior of the default imports in the future as stated in their blog post here.

Thanks for looking into this.

[vzaidman]

Did you change the react-preset in the babel config to:

['@babel/preset-react', {
  runtime: 'automatic',
  development: process.env.NODE_ENV === 'development',
  importSource: '@welldone-software/why-did-you-render',
}]

?

And yes, I'm aware of the React's team decision regarding default imports. I hope I'll be able to come up with a solution to this problem by then...

[delyanr]

Ahh, indeed, I botched the babel config. I can confirm that why-did-you-render works now in the following cases:

• webpack@4 with the new JSX transforms and import * as React from 'react'
• webpack@5 with the new JSX transforms but only import React from 'react'

Unfortunately, it still crashes with webpack@5 with the new JSX transforms and import * as React from 'react'.

[vzaidman]

Great!
I'm closing it for now. I hope I'll find a way to rewrite esmodule imports later.