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.

Sign up for GitHub

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

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

Merged
merged 1 commit into from
Aug 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,6 +496,7 @@ module.exports = {
__IS_CHROME__: 'readonly',
__IS_FIREFOX__: 'readonly',
__IS_EDGE__: 'readonly',
__IS_NATIVE__: 'readonly',
__IS_INTERNAL_VERSION__: 'readonly',
},
},
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-core/webpack.backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ module.exports = {
__IS_FIREFOX__: false,
__IS_CHROME__: false,
__IS_EDGE__: false,
__IS_NATIVE__: true,
Copy link
Collaborator

Choose a reason for hiding this comment

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

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?

Copy link
Contributor Author

@hoxyq hoxyq Aug 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

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.

Copy link
Collaborator

Choose a reason for hiding this comment

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

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?

Copy link
Contributor Author

@hoxyq hoxyq Aug 1, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

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"
},

Copy link

Choose a reason for hiding this comment

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

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link

Choose a reason for hiding this comment

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

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>

Copy link

Choose a reason for hiding this comment

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

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

'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.backend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ module.exports = {
__IS_CHROME__: IS_CHROME,
__IS_FIREFOX__: IS_FIREFOX,
__IS_EDGE__: IS_EDGE,
__IS_NATIVE__: false,
}),
new Webpack.SourceMapDevToolPlugin({
filename: '[file].map',
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ module.exports = {
__IS_CHROME__: IS_CHROME,
__IS_FIREFOX__: IS_FIREFOX,
__IS_EDGE__: IS_EDGE,
__IS_NATIVE__: false,
__IS_INTERNAL_VERSION__: IS_INTERNAL_VERSION,
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-inline/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ module.exports = {
__IS_CHROME__: false,
__IS_FIREFOX__: false,
__IS_EDGE__: false,
__IS_NATIVE__: false,
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/console.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ export function patch({
// formatting. Otherwise it is left alone. So we prefix it. Otherwise we just override it
// to our own stack.
fakeError.stack =
__IS_CHROME__ || __IS_EDGE__
__IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__
? (enableOwnerStacks
? 'Error Stack:'
: 'Error Component Stack:') + componentStack
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function describeBuiltInComponentFrame(name: string): string {
}
}
let suffix = '';
if (__IS_CHROME__ || __IS_EDGE__) {
if (__IS_CHROME__ || __IS_EDGE__ || __IS_NATIVE__) {
suffix = ' (<anonymous>)';
} else if (__IS_FIREFOX__) {
suffix = '@unknown:0:0';
Expand Down
1 change: 1 addition & 0 deletions scripts/flow/react-devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@ declare const __TEST__: boolean;
declare const __IS_FIREFOX__: boolean;
declare const __IS_CHROME__: boolean;
declare const __IS_EDGE__: boolean;
declare const __IS_NATIVE__: boolean;
1 change: 1 addition & 0 deletions scripts/jest/devtools/setupEnv.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ global.__TEST__ = true;
global.__IS_FIREFOX__ = false;
global.__IS_CHROME__ = false;
global.__IS_EDGE__ = false;
global.__IS_NATIVE__ = false;

const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;

Expand Down
Loading