How can one tell the version of React running at runtime in the browser?
JavascriptReactjsJavascript Problem Overview
Is there a way to know the runtime version of React in the browser?
Javascript Solutions
Solution 1 - Javascript
React.version
is what you are looking for.
It is undocumented though (as far as I know) so it may not be a stable feature (i.e. though unlikely, it may disappear or change in future releases).
Example with React
imported as a script
const REACT_VERSION = React.version;
ReactDOM.render(
<div>React version: {REACT_VERSION}</div>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
Example with React
imported as a module
import React from 'react';
console.log(React.version);
Obviously, if you import React
as a module, it won't be in the global scope. The above code is intended to be bundled with the rest of your app, e.g. using webpack. It will virtually never work if used in a browser's console (it is using bare imports).
This second approach is the recommended one. Most websites will use it. create-react-app does this (it's using webpack behind the scene). In this case, React
is encapsulated and is generally not accessible at all outside the bundle (e.g. in a browser's console).
Solution 2 - Javascript
From the command line:
npm view react version
npm view react-native version
Solution 3 - Javascript
With the React Devtools installed you can run this from the browser console:
__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))
Which outputs something like:
react-dom: 16.12.0
Solution 4 - Javascript
Open Chrome Dev Tools or equivalent and run require('React').version
in the console.
That works on websites like Facebook as well to find out what version they are using.
Solution 5 - Javascript
It is not certain that any global ECMAScript variables have been exported and html/css does not necessarily indicate React. So look in the .js.
Method 1: Look in ECMAScript:
The version number is exported by both modules react-dom and react but those names are often removed by bundling and the version hidden inside an execution context that cannot be accessed. A clever break point may reveal the value directly, or you can search the ECMAScript:
- Load the Web page (you can try https://www.instagram.com they’re total Coolaiders)
- Open Chrome Developer Tools on Sources tab (control+shift+i or command+shift+i)
- Dev tools open on the Sources tab
- In the very right of the top menu bar, click the vertical ellipsis and select search all files
- In he search box down on left type FIRED in capital letters, clear the checkbox Ignore case, type Enter
- One or more matches appear below. The version is an export very close to the search string looking like version: "16.0.0"
- If the version number is not immediately visible: double click a line that begins with a line number
- ECMAScript appears in the middle pane
- If the version number is not immediately visible: click the two braces at bottom left of the ECMAScript pane {}
- ECMAScript is reformatted and easier to read
- If the version number is not immediately visible: scroll up and down a few lines to find it or try another search key
- If the code is not minified, search for ReactVersion There should be 2 hits with the same value
- If the code is minified, search for either SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED or react-dom
- Or search for the likely version string itself: "15. or "16. or even "0.15
Method 2: Use a DOM breakpoint:
- Load the page rendered by React
- Right click a React element (anything, like an input field or a box) and select
Inspect Element
- Chrome Developer Tools displays the
Elements
pane
- Chrome Developer Tools displays the
- As high up in the tree as possible from the selected element, but no higher than the React root element (often a div directly inside body with id root: <div id="root">), right click an element and select
Break On… - subtree modifications
- Note: It is possible to compare contents of the Elements tab (DOM current state) with the response for the same resouce on the Networks tab. This may reveal React’s root element
- Reload the page by clicking Reload left of the address bar
- Chrome Developer Tools stops at the breakpoint and displays the
Sources
pane
- Chrome Developer Tools stops at the breakpoint and displays the
- In the rightmost pane, examine the
Call Stack
sub-pane - As far down the call stack as possible, there should be a
render
entry, this isReactDOM.render
- Click the line below
render
, ie. the code that invokes render - The middle pane now displays ECMAScript with an expression containing .render highlighted
- Hover the mouse cursor over the object used to invoke render, is. the
react-dom
module exports object- if the code line goes: Object(u.render)(…, hover over the u
- A tooltip window is displayed containing
version: "15.6.2"
, ie. all values exported byreact-dom
The version is also injected into React dev tools, but as far as I know not displayed anywhere.
Solution 6 - Javascript
First Install React dev tools if not installed and then use the run below code in the browser console :
__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version
Solution 7 - Javascript
Open the console, then run window.React.version
.
This worked for me in Safari and Chrome while upgrading from 0.12.2 to 16.2.0.
Solution 8 - Javascript
In an existing project a simple way to see the React version is to go to a render
method of any component and add:
<p>{React.version}</p>
This assumes you import React like this: import React from 'react'
Solution 9 - Javascript
You can either run the following command(s) on your terminal, depending if you are using npm or yarn:
npm view react version
or
yarn view react version
Or You can also open your package.json file in your project under the "dependencies" check "react": after the semicolon will be the version of your react
Solution 10 - Javascript
In index.js file, simply replace App component with "React.version". E.g.
ReactDOM.render(React.version, document.getElementById('root'));
I have checked this with React v16.8.1
Solution 11 - Javascript
If you have the React DevTools extension enabled, you can execute this in the console:
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version
Here's the output if I execute it on my website in production (nikolovlazar.com)
Solution 12 - Javascript
For an app created with create-react-app I managed to see the version:
- Open Chrome Dev Tools / Firefox Dev Tools,
- Search and open main.XXXXXXXX.js file where XXXXXXXX is a builds hash /could be different,
- Optional: format source by clicking on the {} to show the formatted source,
- Search as text inside the source for react-dom,
- in Chrome was found: "react-dom": "^16.4.0",
- in Firefox was found: 'react-dom': '^16.4.0'
The app was deployed without source map.
Solution 13 - Javascript
This strategy should work all of the time: In the end React has to be included in a js file in the html through a script tag. So find that file and look for the React version.
- Look through all the scripts included in the HTML (view source)
- One of the links include the script to React. WebPack lumps the libraries together under a common-xxxx.js file
- Open that script file and ctrl + f search for React
- Presto, version number there
Solution 14 - Javascript
If you have already deployed your app which used webpack. You can use the below step to identify the "react" and "react-dom".
- Open DeveloperTool in your browser
- Go to Source Tab
- Check your
appName
.js file - Search for "react" or "react-dom" You will find something like below. That will be the version your react-app is using.
> "webpack/sharing/consume/default/react/react?1aa9": () => (loadStrictVersionCheckFallback("default", "react", [,[1,17,0,0],[1,16,8,0],1],// ..SOMETHINNG
> "webpack/sharing/consume/default/react-dom/react-dom?8d07": () => (loadStrictVersionCheckFallback("default", "react-dom", [,[1,17,0,0],[1,16,8,0],1], // ..SOMETHINNG
OR
> register("react-dom", "17.0.2", () // ..SOMETHING
> register("react", "17.0.2", ()// ..SOMETHINNG
Note: It only applicable for deployed app
Solution 15 - Javascript
To know the react version, Open package.json file in root folder, search the keywork react. You will see like "react": "^16.4.0",