Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] - ReactDOM Add back version property to client #15780

Merged

Conversation

ealush
Copy link
Contributor

@ealush ealush commented May 30, 2019

Change details

Adding back .version property to ReactDOM. It used to exist in React15 and got deleted. It still exists in ReactDOM/server, and it appears to be typed in @typed/react-dom so I am assuming it got deleted by mistake.

@sizebot
Copy link

sizebot commented May 30, 2019

No significant bundle size changes to report.

Generated by 🚫 dangerJS

@ealush ealush changed the title Add version property to ReactDOM [FIX] - ReactDOM Add back version property to client Jun 11, 2019
@ealush
Copy link
Contributor Author

ealush commented Jul 23, 2019

Ping:
@threepointone, @trueadm
Can you take a look at it? It can really help when debugging version mismatch.

@michasherman
Copy link

Any updates on this?

@omrilotan
Copy link

Is this going to be added?

@ealush ealush force-pushed the 2019-05-30-add-version-to-react-dom branch from 0d010e4 to a4f9d91 Compare January 23, 2020 22:39
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a4f9d91:

Sandbox Source
nifty-framework-qigqk Configuration

@ealush ealush requested a review from gaearon January 23, 2020 22:43
@sizebot
Copy link

sizebot commented Jan 23, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against a4f9d91

@sizebot
Copy link

sizebot commented Jan 23, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against a4f9d91

@milesj
Copy link
Contributor

milesj commented Jan 23, 2020

Why is this necessary? Just do require('react-dom/package.json').version.

@ealush
Copy link
Contributor Author

ealush commented Jan 24, 2020

@milesj, First, this is the browser interface, in the browser I don't have direct access to package.json. You can expose it, of course, but when debugging production applications this is not something you want to do.

Second, as I noted in the description of this pr All other interfaces (react, react-dom/server) still have it, and this is the only one where it doesn't exist. @typed also assumes it is there.

All these lead me to believe that the version key got deleted by mistake when moving from react 15 to 16.

Copy link
Contributor

@bvaughn bvaughn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if the decision to remove it was intentional or not.

React DOM reports its version to DevTools (which necessarily needs some forking, since it supports many versions) but I think we might be cautious about having application code check this number. Usually it's better to feature detect specific APIs instead.

I'm a little reluctant to add it back because I'm not sure how you're wanting to use it 😄 Tell me more?

cc @gaearon and @sebmarkbage

@ealush
Copy link
Contributor Author

ealush commented Feb 3, 2020

TBH I had no idea you could detect ReactDOM's version from devtools.

When I created the PR we were debugging a production site with multiple versions of React present on the same page - some with legacy React15 code and some with React16. We experienced a React/ReactDOM version mismatch which resulted in hooks errors.

When trying to debug it on the server both react and react-dom exposed their version, but in the client only react did so we couldn't really tell which version of React our code was using. The errors were not present in development.

Working on this issue I assumed it got deleted by mistake since all other APIs still maintained the version property. If that's something that we don't plan on adding back then maybe I should create an opposite PR to fix DefinitelyTyped 😅.

Copy link
Contributor

@bvaughn bvaughn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems legit to bring the client into parity with the others. I ran this change by the team and there were no objections.

Note that the version reported for experimental releases will be a little different, e.g. NPM version 0.0.0-experimental-241c4467e will be reported as "16.12.0-experimental-241c4467e".

@bvaughn bvaughn merged commit 9944bf2 into facebook:master Feb 3, 2020
@ealush ealush deleted the 2019-05-30-add-version-to-react-dom branch February 3, 2020 20:39
@gaearon
Copy link
Collaborator

gaearon commented Feb 26, 2020

Out in 16.13

newkdr added a commit to newkdr/vscode-gitlens that referenced this pull request Dec 12, 2024
![snyk-top-banner](https://redirect.github.com/andygongea/OWASP-Benchmark/assets/818805/c518c423-16fe-447e-b67f-ad5a49b5d123)


<h3>Snyk has created this PR to upgrade react-dom from 16.8.4 to
16.14.0.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **13 versions** ahead of your current
version.

- The recommended version was released on **4 years ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>react-dom</b></summary>
    <ul>
      <li>
<b>16.14.0</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.14.0">2020-10-14</a></br><h3>React</h3>
<ul>
<li>Add support for the <a
href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html"
rel="nofollow">new JSX transform</a>. (<a
href="https://redirect.github.com/lunaruan">@ lunaruan</a> in <a
href="https://redirect.github.com/facebook/react/pull/18299"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18299/hovercard">#18299</a>)</li>
</ul>
      </li>
      <li>
<b>16.13.1</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.13.1">2020-03-19</a></br><h3>React
DOM</h3>
<ul>
<li>Fix bug in legacy mode Suspense where effect clean-up functions are
not fired. This only affects users who use Suspense for data fetching in
legacy mode, which is not technically supported. (<a
href="https://redirect.github.com/acdlite">@ acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/18238"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18238/hovercard">#18238</a>)</li>
<li>Revert warning for cross-component updates that happen inside class
render lifecycles (<code>componentWillReceiveProps</code>,
<code>shouldComponentUpdate</code>, and so on). (<a
href="https://redirect.github.com/gaearon">@ gaearon</a> in <a
href="https://redirect.github.com/facebook/react/pull/18330"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18330/hovercard">#18330</a>)</li>
</ul>
<h2>Artifacts</h2>
<ul>
<li>react: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-art: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-dom: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-is: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-test-renderer: <a
href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>scheduler: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
</ul>
      </li>
      <li>
<b>16.13.0</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.13.0">2020-02-26</a></br><h3>React</h3>
<ul>
<li>Warn when a string ref is used in a manner that's not amenable to a
future codemod (<a href="https://redirect.github.com/lunaruan">@
lunaruan</a> in <a
href="https://redirect.github.com/facebook/react/pull/17864"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17864/hovercard">#17864</a>)</li>
<li>Deprecate <code>React.createFactory()</code> (<a
href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17878"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17878/hovercard">#17878</a>)</li>
</ul>
<h3>React DOM</h3>
<ul>
<li>Warn when changes in <code>style</code> may cause an unexpected
collision (<a href="https://redirect.github.com/sophiebits">@
sophiebits</a> in <a
href="https://redirect.github.com/facebook/react/pull/14181"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/14181/hovercard">#14181</a>, <a
href="https://redirect.github.com/facebook/react/pull/18002"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18002/hovercard">#18002</a>)</li>
<li>Warn when a function component is updated during another component's
render phase (<a class="user-mention notranslate"
data-hovercard-type="user" data-hovercard-url="/users/acdlite/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/acdlite">@ acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/17099"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17099/hovercard">#17099</a>)</li>
<li>Deprecate <code>unstable_createPortal</code> (<a
href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17880"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17880/hovercard">#17880</a>)</li>
<li>Fix <code>onMouseEnter</code> being fired on disabled buttons (<a
href="https://redirect.github.com/AlfredoGJ">@ AlfredoGJ</a> in <a
href="https://redirect.github.com/facebook/react/pull/17675"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17675/hovercard">#17675</a>)</li>
<li>Call <code>shouldComponentUpdate</code> twice when developing in
<code>StrictMode</code> (<a href="https://redirect.github.com/bvaughn">@
bvaughn</a> in <a
href="https://redirect.github.com/facebook/react/pull/17942"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17942/hovercard">#17942</a>)</li>
<li>Add <code>version</code> property to ReactDOM (<a
href="https://redirect.github.com/ealush">@ ealush</a> in <a
href="https://redirect.github.com/facebook/react/pull/15780"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/15780/hovercard">#15780</a>)</li>
<li>Don't call <code>toString()</code> of
<code>dangerouslySetInnerHTML</code> (<a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17773"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17773/hovercard">#17773</a>)</li>
<li>Show component stacks in more warnings (<a
href="https://redirect.github.com/gaearon">@ gaearon</a> in <a
href="https://redirect.github.com/facebook/react/pull/17922"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17922/hovercard">#17922</a>, <a
href="https://redirect.github.com/facebook/react/pull/17586"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17586/hovercard">#17586</a>)</li>
</ul>
<h3>Concurrent Mode (Experimental)</h3>
<ul>
<li>Warn for problematic usages of <code>ReactDOM.createRoot()</code>
(<a href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17937"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17937/hovercard">#17937</a>)</li>
<li>Remove <code>ReactDOM.createRoot()</code> callback params and added
warnings on usage (<a href="https://redirect.github.com/bvaughn">@
bvaughn</a> in <a
href="https://redirect.github.com/facebook/react/pull/17916"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17916/hovercard">#17916</a>)</li>
<li>Don't group Idle/Offscreen work with other work (<a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17456"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17456/hovercard">#17456</a>)</li>
<li>Adjust <code>SuspenseList</code> CPU bound heuristic (<a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17455"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17455/hovercard">#17455</a>)</li>
<li>Add missing event plugin priorities (<a
href="https://redirect.github.com/trueadm">@ trueadm</a> in <a
href="https://redirect.github.com/facebook/react/pull/17914"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17914/hovercard">#17914</a>)</li>
<li>Fix <code>isPending</code> only being true when transitioning from
inside an input event (<a href="https://redirect.github.com/acdlite">@
acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/17382"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17382/hovercard">#17382</a>)</li>
<li>Fix <code>React.memo</code> components dropping updates when
interrupted by a higher priority update (<a class="user-mention
notranslate" data-hovercard-type="user"
data-hovercard-url="/users/acdlite/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/acdlite">@ acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/18091"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/18091/hovercard">#18091</a>)</li>
<li>Don't warn when suspending at the wrong priority (<a
href="https://redirect.github.com/gaearon">@ gaearon</a> in <a
href="https://redirect.github.com/facebook/react/pull/17971"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17971/hovercard">#17971</a>)</li>
<li>Fix a bug with rebasing updates (<a
href="https://redirect.github.com/acdlite">@ acdlite</a> and <a
href="https://redirect.github.com/sebmarkbage">@ sebmarkbage</a> in <a
href="https://redirect.github.com/facebook/react/pull/17560"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17560/hovercard">#17560</a>, <a
href="https://redirect.github.com/facebook/react/pull/17510"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17510/hovercard">#17510</a>, <a
href="https://redirect.github.com/facebook/react/pull/17483"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17483/hovercard">#17483</a>, <a
href="https://redirect.github.com/facebook/react/pull/17480"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17480/hovercard">#17480</a>)</li>
</ul>
<h2>Artifacts</h2>
<ul>
<li>react: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-art: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-dom: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-is: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>react-test-renderer: <a
href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
<li>scheduler: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></li>
</ul>
      </li>
      <li>
<b>16.12.0</b> - <a
href="https://redirect.github.com/facebook/react/releases/tag/v16.12.0">2019-11-14</a></br><h3>React
DOM</h3>
<ul>
<li>Fix passive effects (<code>useEffect</code>) not being fired in a
multi-root app. (<a href="https://redirect.github.com/acdlite">@
acdlite</a> in <a
href="https://redirect.github.com/facebook/react/pull/17347"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17347/hovercard">#17347</a>)</li>
</ul>
<h3>React Is</h3>
<ul>
<li>Fix <code>lazy</code> and <code>memo</code> types considered
elements instead of components (<a
href="https://redirect.github.com/bvaughn">@ bvaughn</a> in <a
href="https://redirect.github.com/facebook/react/pull/17278"
data-hovercard-type="pull_request"
data-hovercard-url="/facebook/react/pull/17278/hovercard">#17278</a>)</li>
</ul>
<h2>Artifacts</h2>
<p>• react: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a><br>
• react-art: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a><br>
• react-dom: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a><br>
• react-is: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a><br>
• react-test-renderer: <a
href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a><br>
• scheduler: <a href="https://unpkg.com/[email protected]/umd/"
rel="nofollow">https://unpkg.com/[email protected]/umd/</a></p>
      </li>
      <li>
        <b>16.11.0</b> - 2019-10-22
      </li>
      <li>
        <b>16.10.2</b> - 2019-10-03
      </li>
      <li>
        <b>16.10.1</b> - 2019-09-28
      </li>
      <li>
        <b>16.10.0</b> - 2019-09-27
      </li>
      <li>
        <b>16.9.0</b> - 2019-08-08
      </li>
      <li>
        <b>16.9.0-rc.0</b> - 2019-08-05
      </li>
      <li>
        <b>16.9.0-alpha.0</b> - 2019-04-03
      </li>
      <li>
        <b>16.8.6</b> - 2019-03-28
      </li>
      <li>
        <b>16.8.5</b> - 2019-03-22
      </li>
      <li>
        <b>16.8.4</b> - 2019-03-05
      </li>
    </ul>
from <a
href="https://redirect.github.com/facebook/react/releases">react-dom
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI4NTdmYmVkYy1hZTE3LTQ3ZGYtODhkYy03MTcyMWYxNThjZTkiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6Ijg1N2ZiZWRjLWFlMTctNDdkZi04OGRjLTcxNzIxZjE1OGNlOSJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17/settings/integration?pkg&#x3D;react-dom&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react-dom","from":"16.8.4","to":"16.14.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"857fbedc-ae17-47df-88dc-71721f158ce9","prPublicId":"857fbedc-ae17-47df-88dc-71721f158ce9","packageManager":"npm","priorityScoreList":[],"projectPublicId":"12a8a5f5-3e19-438c-8280-eb8f4ee06d17","projectUrl":"https://app.snyk.io/org/newkdr/project/12a8a5f5-3e19-438c-8280-eb8f4ee06d17?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":13,"publishedDate":"2020-10-14T19:38:26.085Z"},"vulns":[]}'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants