chore[react-devtools]: add global for native and use it to fork backend implementation

[hoxyq]

Adding __IS_NATIVE__ global, which will be used for forking backend implementation. Will only be set to true for react-devtools-core package, which is used by react-native.

Ideally, we should name it react-devtools-native, and keep react-devtools-core as host-agnostic.

With this change, the next release of react-devtools-core should append component stack as Error object, not as string, and should add (<anonymous>) suffix to component stack frames.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2024 6:41pm

[react-sizebot]

Comparing: 41ecbad...8216da0

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	+0.11%	1.82 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	501.29 kB	501.29 kB	=	89.95 kB	89.95 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	+0.11%	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	508.41 kB	508.41 kB	=	91.12 kB	91.12 kB
facebook-www/ReactDOM-prod.classic.js	=	596.31 kB	596.31 kB	=	105.76 kB	105.76 kB
facebook-www/ReactDOM-prod.modern.js	=	572.61 kB	572.61 kB	=	101.96 kB	101.96 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 4b6c259

[eps1lon]

Does this not conflict with the idea that react-devtools is also usable in mobile browsers or Safari? Or is react-devtools not using the version of react-devtools-core/backend that was built with this config?

[hoxyq]

packages/react-devtools is a frontend-only package and is only using standalone from packages/react-devtools-core. This webpack config is for backend file.

[eps1lon]

Isn't react-devtools importing from react-devtools-core/backend (

react/packages/react-devtools/index.js

Line 10 in 9cdf8a9

const {connectToDevTools} = require('react-devtools-core/backend');

)? I guess this is safe now but isn't it possible that we start bundling RN specific code that breaks module evaluation?

[hoxyq]

Oh wow, I think this is out of date and should be removed. This file should not be used, because by default bin.js is going to start an electron session with React DevTools frontend.

react/packages/react-devtools/package.json

Lines 11 to 13 in 06d0b89

	"bin": {
	"react-devtools": "./bin.js"
	},

[sergunich]

I believe this change did break this part
https://github.com/facebook/react/blob/v19.0.0/packages/react-devtools/README.md#usage-with-react-dom

If you install react-devtools as a project dependency, you may also replace the <script> suggested above with a JavaScript import (import 'react-devtools'). It is important that this import comes before any other imports in your app (especially before react-dom). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add 'react-devtools' as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with <script> tags or import statements.

How it supposed to work now?

[hoxyq]

I believe this change did break this part https://github.com/facebook/react/blob/v19.0.0/packages/react-devtools/README.md#usage-with-react-dom

If you install react-devtools as a project dependency, you may also replace the <script> suggested above with a JavaScript import (import 'react-devtools'). It is important that this import comes before any other imports in your app (especially before react-dom). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add 'react-devtools' as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with <script> tags or import statements.

How it supposed to work now?

For React Native, consider using React Native DevTools (available from 0.76+), which has RDT built-in:
https://reactnative.dev/docs/react-native-devtools

[sergunich]

But I do not use React Native 🙂

I'm using a good old webpack to build to browser and getting this error:

ERROR in app
Module not found: Error: Can't resolve 'react-devtools' in '/Users/sergunich/dev/work/tromzo/stereo/code/dashboard'

<skipping bunch of lines for gravity>

                existing directory /Users/sergunich/dev/work/tromzo/stereo/code/dashboard/node_modules/react-devtools
                  using description file: /Users/sergunich/dev/work/tromzo/stereo/code/dashboard/node_modules/react-devtools/package.json (relative path: .)
                    using path: /Users/sergunich/dev/work/tromzo/stereo/code/dashboard/node_modules/react-devtools/index
                      using description file: /Users/sergunich/dev/work/tromzo/stereo/code/dashboard/node_modules/react-devtools/package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/sergunich/dev/work/tromzo/stereo/code/dashboard/node_modules/react-devtools/index doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/sergunich/dev/work/tromzo/stereo/code/dashboard/node_modules/react-devtools/index.js doesn't exist
                          
<a bit more of lines>

[sergunich]

Maybe I commented in the wrong PR but seems this discussion is related to removal of index.js in later PRs
https://github.com/facebook/react/pull/30533/files#r1700441728

And without index.js this part won't work:

If you use Webpack and have control over its configuration, you could alternatively add 'react-devtools' as the first item in the entry array of the development-only configuration