Is there a way to know the runtime version of React in the browser?
17 Answers
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;
let root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<div>React version: {REACT_VERSION}</div>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Example with React
imported as a module
import { version } from 'react';
console.log(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).
-
I was able to console.log(React.version) at the entry point of my program to get the version– leojhCommented May 3, 2016 at 2:29
-
1@gotofritz No? I just tested with React 16.0.0 and it was still working. What react version are you using? How do you import it? Commented Oct 10, 2017 at 15:36
-
1Maybe it depends on how the app is packaged. With create-react-app there is no global React object. Commented Oct 10, 2017 at 19:23
-
2No. There is no React global if you are importing react as a module. In that case, you need to import the module first and fetch the
version
property of the module. Commented Nov 21, 2017 at 15:28 -
1
render()
is deprecated in React 18, you should now usecreateRoot()
:import ReactDOM from 'react-dom/client';ReactDOM.createRoot()
– TimoCommented Jun 21, 2022 at 15:06
From the command line:
npm view react version
npm view react-native version
-
6This is wrong,
npm view
returns latest version from npm registery, not version in use. docs.npmjs.com/cli/v7/commands/npm-view Commented Feb 3, 2022 at 18:50 -
4you should run this command in your present working directory which is supposed to be your reactjs app folder. Commented Aug 10, 2022 at 7:47
-
This is not the runtime version from the browser, asked in the question. The correct answer is this one: stackoverflow.com/a/60280185/358532 Commented Mar 15 at 11:29
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
-
8This seems to be the only actually working solution for finding out React version used on a website. Commented Mar 25, 2020 at 7:23
-
1This seems to be the best solution as it doesn't require tinkering with the source files, or the website using require(). It probably should be the accepted answer as it does what the OP was asking– MorvaelCommented Feb 21, 2023 at 9:57
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)
-
1Really useful. This can be used to check React version without making changes to code. Commented Aug 7, 2023 at 6:18
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.
-
2Tried it...doesn't work with my app..running version react-dom v16. Commented Oct 6, 2017 at 16:27
-
33
-
2That's because the site you're testing it on does not use requirejs. @JonSchneider– user9016207Commented Mar 2, 2018 at 16:49
-
1@WillHoskings: Interesting observation. Is there any way to get around it, or are we stuck? Commented May 30, 2018 at 22:50
-
1@HoldOffHunger Unless React pollutes the global scope with the "React" global, I don't know.– user9016207Commented Nov 4, 2018 at 13:41
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.
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
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'
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
-
2
npm view react version
shows latest package version, not the version installed. Andpackage.json
typically won't specify a specific React version, but rather a minimal required version, which is not sufficient to identify the running version. Commented Feb 3, 2022 at 18:48
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.
-
6
-
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.
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
Use the command line commands for checking the version of the ReactJS. You can run the below command.
npm view react version
or
yarn view react version
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
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
console.log(React.version)
will print the version of the react running in your project.
To know the react version, Open package.json file in root folder, search the keywork react. You will see like "react": "^16.4.0",
-
4The question was how can you tell the React version in the browser. Commented Nov 3, 2020 at 20:49
__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]