Release v4 (#140)

- Node.js `20+`
- Removed `fs-extra`
- Use `node:` imports
- Update dependencies
- Update README.md

Author: retyui

CHANGELOG.md

@@ -1,4 +1,13 @@
-# [3.2.0](https://github.com/IjzerenHein/react-native-bundle-visualizer/releases/tag/v3.2.0) (2026-03-18)
+# [4.0.0](https://github.com/callstack/react-native-bundle-visualizer/releases/tag/v3.2.0) (2026-03-19)
+
+**Breaking change:**
+ - Node.js `20+`
+ - Expo SDK `50+`
+ - React Native `0.72.x+`
+ - `fs-extra` was replaced with build-in `fs` module
+ - Update dependencies to their latest versions
+
+# [3.2.0](https://github.com/callstack/react-native-bundle-visualizer/releases/tag/v3.2.0) (2026-03-18)
 
 - Fixes [Your source map refers to generated line 17, but the source only contains 15 line(s). Check that you are using the correct source map](https://github.com/callstack/react-native-bundle-visualizer/issues/127) disable border checks by default since all Modern React Native versions generate source maps with some invalid mappings. You can re-enable these checks by passing the `--border-checks` flag.
 

README.md

@@ -1,37 +1,45 @@
 # react-native-bundle-visualizer
 
-See what's inside of your react-native bundle 📦
+[![react-native-bundle-visualizer on npm](https://badgen.net/npm/v/react-native-bundle-visualizer)](https://www.npmjs.com/package/react-native-bundle-visualizer)
+[![react-native-bundle-visualizer downloads](https://badgen.net/npm/dm/react-native-bundle-visualizer)](https://www.npmtrends.com/react-native-bundle-visualizer)
+[![react-native-bundle-visualizer install size](https://packagephobia.com/badge?p=react-native-bundle-visualizer)](https://packagephobia.com/result?p=react-native-bundle-visualizer)
+[![CI status](https://github.com/callstack/react-native-bundle-visualizer/actions/workflows/test.yml/badge.svg)](https://github.com/callstack/react-native-bundle-visualizer/actions/workflows/test.yml)
+
+
+See what's inside your react-native bundle 📦
 
 ![bundle-visualizer-animation](./react-native-bundle-visualizer2.gif)
 
 Uses the awesome [source-map-explorer](https://github.com/danvk/source-map-explorer) to visualize the output of the [Metro bundler](https://github.com/facebook/metro).
 
 ## Purpose
 
-Sometimes, importing a single javascript library can drastically increase your bundle size. This package helps you to identify such a library, so you can keep the bundle size low and loading times fast.
+Sometimes, importing a single JavaScript library can drastically increase your bundle size. This package helps you to identify such a library, so you can keep the bundle size low and loading times fast.
 
 ## Usage
 
-Make sure [npx](https://github.com/npm/npx) is installed and run the following command in your project root
-
-`npx react-native-bundle-visualizer`
-
-### Or install as a dev-dependency
+Using `npx` is the recommended way to run the visualizer
 
 ```sh
-yarn add --dev react-native-bundle-visualizer
+# React Native 0.72+
+npx react-native-bundle-visualizer@latest
+# or Expo SDK 50+
+npx react-native-bundle-visualizer@latest --expo
 ```
 
-And run it:
+### Or you can install as a dev-dependency
 
-```
-yarn run react-native-bundle-visualizer
+```sh
+yarn add --dev react-native-bundle-visualizer
+# or npm
+npm install --save-dev react-native-bundle-visualizer
 ```
 
-_or when using npm:_
+To run the local version of visualizer, use the following command:
 
-```
-npm install --save-dev react-native-bundle-visualizer ./node_modules/.bin/react-native-bundle-visualizer
+```sh
+npx react-native-bundle-visualizer # if installed by yarn or npm
+yarn run react-native-bundle-visualizer # if installed by Yarn
 ```
 
 ## Command line arguments
@@ -53,16 +61,57 @@ All command-line arguments are optional. By default a production build will be c
 
 [smeo]: https://github.com/danvk/source-map-explorer#options
 
-> Use [react-native-bundle-visualizer@2](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v2) when targetting Expo SDK 40 or lower.
+
+## Common questions
+
+#### 1. What version of React Native and Expo is supported?
+
+See the [version compatibility](#version-compatibility) table below.
+
+#### 2. What does `[unmapped]` represent?
+
+`[unmapped]` is code in a final bundle without mapping to original source code (usually generated by bundlers: Webpack, Metro, Babel)
+
+You can [open your source maps online](https://evanw.github.io/source-map-visualization) and check it
+
+See example (red borders is unmapped code):
+
+![](https://github.com/user-attachments/assets/9f0d095f-336e-4bda-af67-b0df09d3a5fb)
+
+#### 3. What alternatives I can use to inspect my bundle?
+
+See the [similar projects](#similar-projects) section below for alternatives to this package.
+
+#### 4. `InvalidMappingColumn` error
+
+> example: Your source map refers to generated column Infinity on line 2, but the source only contains 2075 column(s) on that line
+
+if you faced this error, try to run the visualizer with `--no-border-checks` flag to disable invalid mapping column/line checks.
+
+
+## Similar projects
+
+You can use then following alternatives:
+
+- [expo-atlas](https://github.com/expo/atlas) [![expo-atlas downloads](https://badgen.net/npm/dm/expo-atlas)](https://www.npmtrends.com/expo-atlas) [![expo-atlas install size](https://packagephobia.com/badge?p=expo-atlas)](https://packagephobia.com/result?p=expo-atlas)
+- [expo-atlas-without-expo](https://github.com/v3ron/expo-atlas-without-expo) [![expo-atlas-without-expo downloads](https://badgen.net/npm/dm/expo-atlas-without-expo)](https://www.npmtrends.com/expo-atlas-without-expo) [![expo-atlas-without-expo install size](https://packagephobia.com/badge?p=expo-atlas-without-expo)](https://packagephobia.com/result?p=expo-atlas-without-expo)
+- [react-native-bundle-visualizer](https://github.com/callstack/react-native-bundle-visualizer) [![react-native-bundle-visualizer downloads](https://badgen.net/npm/dm/react-native-bundle-visualizer)](https://www.npmtrends.com/react-native-bundle-visualizer)[![react-native-bundle-visualizer install size](https://packagephobia.com/badge?p=react-native-bundle-visualizer)](https://packagephobia.com/result?p=react-native-bundle-visualizer)
+- [react-native-bundle-discovery](https://github.com/retyui/react-native-bundle-discovery) [![react-native-bundle-discovery downloads](https://badgen.net/npm/dm/react-native-bundle-discovery)](https://www.npmtrends.com/react-native-bundle-discovery) [![react-native-bundle-discovery install size](https://packagephobia.com/badge?p=react-native-bundle-discovery)](https://packagephobia.com/result?p=react-native-bundle-discovery)
+- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) [![webpack-bundle-analyzer downloads](https://badgen.net/npm/dm/webpack-bundle-analyzer)](https://www.npmtrends.com/webpack-bundle-analyzer)[![webpack-bundle-analyzer install size](https://packagephobia.com/badge?p=webpack-bundle-analyzer)](https://packagephobia.com/result?p=webpack-bundle-analyzer)
+- [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli#readme) [![bundle-stats downloads](https://badgen.net/npm/dm/bundle-stats)](https://www.npmtrends.com/bundle-stats)[![bundle-stats install size](https://packagephobia.com/badge?p=bundle-stats)](https://packagephobia.com/result?p=bundle-stats)
+- [statoscope](https://github.com/statoscope/statoscope) [![@statoscope/cli downloads](https://badgen.net/npm/dm/@statoscope/cli)](https://www.npmtrends.com/@statoscope/cli)[![@statoscope/cli install size](https://packagephobia.com/badge?p=@statoscope/cli)](https://packagephobia.com/result?p=@statoscope/cli)
+
 
 ## Version compatibility
 
-| Version                                                                      | Comments                                                                                        |
-| ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| 3.x                                                                          | Compatible with React-Native CLI bootstrapped projects and Expo SDK 41 or higher.               |
-| [2.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v2) | Compatible with React-Native CLI bootstrapped projects and Expo SDK 40 or earlier.              |
+| Version                                                                      | Comments                                                         |
+|------------------------------------------------------------------------------|------------------------------------------------------------------|
+| 4.x                                                                          | Compatible with React Native 0.72+ or Expo SDK 50+ (Node.js 20+) |
+| [3.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v3) | Compatible with React-Native CLI bootstrapped projects and Expo SDK 41 or higher. |
+| [2.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v2) | Compatible with React-Native CLI bootstrapped projects and Expo SDK 40 or earlier. |
 | [1.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v1) | Uses the [Haul bundler](https://github.com/callstack/haul) instead instead of the Metro output. |
 
+
 ## License
 
 [MIT](./LICENSE.txt)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bundle-visualizer",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "See what's inside your react-native bundle",
   "author": "IjzerenHein <hrutjes@gmail.com>",
   "keywords": [
@@ -22,15 +22,17 @@
   ],
   "dependencies": {
     "chalk": "^4.1.2",
-    "execa": "^5.1.1",
-    "fs-extra": "^10.0.0",
-    "minimist": "^1.2.5",
-    "open": "^8.4.0",
+    "execa": "^9.6.1",
+    "minimist": "^1.2.8",
+    "open": "^11.0.0",
     "source-map-explorer": "^2.5.3"
   },
   "scripts": {
     "test": "yarn test:rn && yarn test:expo",
     "test:rn": "cd test/RN64 && yarn install && npx ../.. && cd ../..",
     "test:expo": "cd test/Expo42 && yarn install && npx ../.. --expo=true && cd ../.."
+  },
+  "engines": {
+    "node": ">=20"
   }
 }

src/react-native-bundle-visualizer.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
+const fs = require('node:fs');
+const os = require('node:os');
+const process = require('node:process');
+const path = require('node:path');
 const chalk = require('chalk');
-const fs = require('fs-extra');
-const os = require('os');
-const process = require('process');
-const path = require('path');
 const argv = require('minimist')(process.argv.slice(2));
-const execa = require('execa');
-const open = require('open');
+const {execa} = require('execa');
+const open = require('open').default;
 const {explore} = require('source-map-explorer');
 const pkgJSON = JSON.parse(fs.readFileSync('./package.json'));
 
@@ -74,8 +74,8 @@ const borderChecks = argv['border-checks'] === true;
 const errorOnFail = argv['error-on-fail'] || false;
 
 // Make sure the temp dir exists
-fs.ensureDirSync(baseDir);
-fs.ensureDirSync(tmpDir);
+fs.mkdirSync(baseDir, { recursive: true });
+fs.mkdirSync(tmpDir, { recursive: true });
 
 // Try to obtain the previous file size
 let prevBundleSize;
@@ -162,14 +162,15 @@ bundlePromise
       );
 
       // Make sure the explorer output dir is removed
-      fs.removeSync(outDir);
+      fs.rmSync(outDir, { recursive: true, force: true });
       return explore(
         {
           code: bundleOutput,
           map: bundleOutputSourceMap,
         },
         {
           onlyMapped,
+          noRoot: false,
           noBorderChecks: borderChecks === false,
           output: {
             format,