Add support for Webpack 5 message objects

[jasonwilliams]

In webpack 4 message is a string, in webpack 5 it is an object or array.
See conversation here: #7929 (comment)

Closes#9880.

[raix]

also seem related to #10098

[devashissh]

When is this fix going to be merged?

[clwilkening]

Would love for this fix to get merged.
Is there any update?

[mrmckeb]

Based on feedback from @raix, we'll merge this in.

I've tested and this still works as expected for Webpack 4.x users.

[baryman]

Hello, friends. How long will it take for this merge request to be published?

[PadminRK]

Team, please can you let know when this fix is expected to be published?

[mrmckeb]

This is due in the next release, but I can't say exactly when. It should be in the next few weeks :)

[robaweb]

Could someone create a beta-test tag for the commit b172b5e?_pjax=%23js-repo-pjax-container in the package react-dev-utils (npm, yarn), please? It will be great, we really need it!

[indykish]

@mrmckeb When are you guys release the minor release?

[mrmckeb]

This will now be a major release sorry, we're hoping to have an alpha out very soon.

[indykish]

@mrmckeb Any target dates - ball park ?

We used patch-package for now to fix this though.

Thank you for your time.

[noahgrant]

Just curious—why wasn't this added as a patch release, since it's a bugfix that it seems a bunch of people are relying on?

[raix]

@kishoreneelamegam we should be within weeks before v5 alpha (hopefully within two weeks but mind vaccation etc.)

@noahgrant we are aware of lagging releases and working on improving this.

[indykish]

@raix Thank you. No worries

For folks looking for a work around:

Step 1: Move yarn version to 1, if on yarn 2

yarn set version 1

Step 2: Add the latest (6.4.7) patch-package and postinstall-postinstall in package.json

And in the scripts in your package.json

scripts: {
"postinstall": "patch-package"
...
}

Step 3: Do a yarn install

Step 4: Apply the below file in node_modules/react-dev-utils/formatWebpackMessages.js

https://github.com/jasonwilliams/create-react-app/blob/d60198cce48b44d7e2fbbe457754b7e85685ebd5/packages/react-dev-utils/formatWebpackMessages.js

Run the below

yarn patch-package react-dev-hot-utils

A patches/ directory will be auto created with the patch name.

This assumes that you are using node_modules (nodeLinker in .yarnrc.yml) is used in yarn 2

Step 5: Switch back to yarn 2

yarn set version latest

Step 6: yarn install again

The patch will be applied. You will not see the .split error now.

[mwanagosos]

Are there any plans on releasing it anytime soon?

[raix]

It's currently released in alpha

[hunter-digital]

@raix I'm still experiencing this issue when using a CRA build that uses a custom react-scripts and cra-template. These two forks are both largely unmodified, and are based off of the most recent version of CRA. I can see the fix applied in my CRA's packages/react-dev-utils version.

When I do npm info react-dev-utils on the generated app, it says 11.0.4 as expected, but when I view the file in package.json, it does not have the fix applied. Why is it pulling in an older version of react-dev-utils? Is it possible to edit my react-scripts fork to depend on a version that does have the fix?

In other words this tarball does not have the fix:
https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz

But the 11.0.4 react-dev-utils here does have it:
https://github.com/facebook/create-react-app/tree/main/packages/react-dev-utils

[raix]

Odd, not sure if npm has a problem in using prereleases react-dev-utils should be at v12 https://www.npmjs.com/package/react-dev-utils

Maybe try if yarn got the same issue?

[drschulz]

For those looking for the new dev tools version in npm (as of this post it's next.37), you can find v12 in the versions tab here https://www.npmjs.com/package/react-dev-utils, and then can just update your package json to:

"react-dev-utils": "^12.0.0-next.37",