Bug: 17.0.1 npm packages were not built from 17.0.1 source code?

[kokushkin]

React version: 17.0.1

Steps To Reproduce

1. Go at https://codesandbox.io/s/warning-issue-formik-v2-tutorial-start-forked-lwtxx?file=/src/index.js
2. Then reproduce the famous "warning" (the issue is not about this warning)
   
   (type something in the Tool ID)
   (the codesandboxe may freeze a little bit, try to reload the page)
3. Open the browser console (chrome in my case) and you will see
   
   Then go to the code (red arrow on the image above)
4. Make a breakpoint here
   
   reload the page and initiate the "warning" again (see 2)
5. Go down the callstack and you can see the "warning" is written by this code
   
6. Now the question.. I'm using the 17.0.1 version and this code shouldn't exist there. Check this out https://github.com/facebook/react/releases/tag/v17.0.1 and you can find only this:
   
   As you can see instead of error('A component is changing... we have console.error( 'A component is changing....
   The changes were made by this 0cf22a5#diff-e94b1d695a508a3bacbab157bbc3035d75e53174bdb82181077d1b374046f9a6 long time ago.
7. Does it mean that 17.0.1 version of react and react-dom packeges were not built from this source code https://github.com/facebook/react/releases/tag/v17.0.1 ? Seems like a big issue then.
8. It happens without Codesandbox as well.

Link to code example:
https://codesandbox.io/s/warning-issue-formik-v2-tutorial-start-forked-lwtxx?file=/src/index.js

The current behavior

We keep seeing the word "Warning" (which is produced by warning function, though it's not a warning but an error)

The expected behavior

We shouldn't see the word "Warning" if the packages v.17.0.1 were bilt from https://github.com/facebook/react/releases/tag/v17.0.1 sourcecode (because it calls console.error( 'A component is changing... instead of error('A component is changing... )

[eps1lon]

Thanks for the detailed description.

The source code is transpiled with custom babel plugins. The one responsible for the transformation you're seeing is https://github.com/facebook/react/blob/0cf22a56a18790ef34c71bef14f64695c0498619/scripts/babel/transform-replace-console-calls.js which replaces console.(error|warn) calls with methods from https://github.com/facebook/react/blob/0cf22a56a18790ef34c71bef14f64695c0498619/packages/shared/consoleWithStackDev.js.

Does this clear up any confusion?

[kokushkin]

Thanks for the detailed description.

The source code is transpiled with custom babel plugins. The one responsible for the transformation you're seeing is https://github.com/facebook/react/blob/0cf22a56a18790ef34c71bef14f64695c0498619/scripts/babel/transform-replace-console-calls.js which replaces console.(error|warn) calls with methods from https://github.com/facebook/react/blob/0cf22a56a18790ef34c71bef14f64695c0498619/packages/shared/consoleWithStackDev.js.

Does this clear up any confusion?

Thanks @eps1lon yes it does, thank you! I hadn't seen it, but now I see.
Well, I still have a question though...what was the intention to add this into the babel plugin? I read the comment:

// In DEV, calls to console.warn and console.error get replaced
// by calls to these methods by a Babel plugin.
//
// In PROD (or in packages without access to React internals),
// they are left as they are instead.

but it still unclear.
There are still many if (__DEV__) { around the console.error in the source code..

( 0cf22a5#diff-e94b1d695a508a3bacbab157bbc3035d75e53174bdb82181077d1b374046f9a6 )

Also, for me, the main question is why to write the "Warning: " string? We see the "Warning: " string even when error happens which is confusing, though it might be the case for another issue.

[eps1lon]

I would go through the history of these files and check the PRs that added them. I don't have all the context memorized.

Going to close this since this is more of a question and not a bug/feature request. Any discussion can still continue.

[kokushkin]

Thanks again! I think I can find all answers here #16753