facebook
checkPropTypes breaks error stack Source Mapping in Chrome
checkPropTypes takes a getStack argument that can be used to send the component or error stack.
It then prints the error stack string at the end of the Warning displayed in the console.
Chrome seemingly expects console.error output to begin with Error in order for it to resolve Source Maps correctly, but the checkPropTypes message sent to console.error begins with the text Warning instead.
This makes Chrome resolve the source to the bundled code rather than using the provided Source Maps. This is a weird issue for sure and I welcome any feedback on other potential causes.
Link to the responsible line of code in the repo
https://github.com/facebook/prop-types/blob/8f89a1cde81f2a32f3295795b037499afa900d3b/checkPropTypes.js#L18
Changing the text from "Warning: " to "Error: " solves the issue.
Current result: (with Warning)
Desired result (with Error)
CodeSandBox link with example code: https://codesandbox.io/s/hungry-snowflake-6qs4v (Note that it works OK inside CodeSandBox because the way they build the project. It's in localhost where things break down)
Possible solutions:
- Change text "Warning: " to "Error: "
- Make the warning/error prefix configurable.
- Replace Warning with Error when an argument for getStack is provided.
I feel like number 2 is least prone to breaking existing code, as some projects might test for the Warning messages.
I'll be happy to submit a PR for the issue if approved.
To be honest, this seems like a bug in Chrome - it shouldn't matter what string the console output starts with. Has it been filed upstream?
@ljharb I'm seeing similar behavior in Firefox. I'm not sure if it's the same underlying issue, but I definitely don't my source maps.
Here's what a normal error looks like for comparison:
