Question:
When using for e.g. Cloudflare Workers runtimes, I'm noticing this error on the server: I'm assuming this results in the following malformed chunk being sent to the stream: Which results in the client failing: I put together a reproduction here, powered by for the Workers runtime: Could this be related to the "fundamentally flawed" nature of Web Streams implementations in e.g. Cloudflare Workers runtime? Is something going on with corking/uncorking, as per Maybe something's wrong with Miniflare's polyfill and this is a non-issue, coming from ? Finally, it's possible something is wrong with the Vite version of the example I've put together. I could try rebuilding with webpack if it's determined none of these items apply.
Have you looked at what chain of assumptions leads to this? It seems like it would be good to understand what different state machines are involved and why something's happening in CF that doesn't happen in the browser.
Have you looked at what chain of assumptions leads to this? after lots of digging, here's what we've discovered: The difference between Cloudflare/Oxygen Workers runtimes and the browser comes down to how the is consumed after being passed to . In the browser and , this is how the stream (via ) is consumed: This presumably results in a single . In the worker runtime, is read through an : Importantly, this results in getting called multiple times as more data is enqueued and as the reader sees fit. This is an assumption on my part, so I could be wrong here. When combined with Suspense boundaries, callbacks trigger . At the same time, repeated requests from the stream reader also call . This results in the following error on the server: You can also reproduce this directly in the browser by attempting to read the stream with . Here is a new fixture with a reproduction of the issue, including a couple test cases that show the different errors you'll see based on the number of Suspense boundaries you have: If this seems like a legitimate bug to you, a couple ideas I had: Should there be some sort of check like in ? Should we splice completed boundaries earlier to account for concurrency so they are removed from the array and not re-flushed? Here are some other resources and scratch notes:
~We'll fix this reentrancy bug somehow. However, right now it's a bit lower priority because CloudFlare technically don't support ReadableStreams and so you have to go through the polyfill and any subtle differences might be due to the polyfill. To really know if we fixed this issue we should apply this to native CloudFlare ReadableStreams... which I'm told is coming. So that's how we know if it actually worked. Until then, the support for CloudFlare workers is... partial.~ On a second thought this should probably fix it. I think I finally understand how it's supposed to work now.
Please take another look and see if this fixes all the issues you've noticed.
works like a charm! Thanks for taking the time to look at it and get it fixed

} } <ins> function makeDelayedText(Model) { let error, _resolve, _reject; let promise = new Promise((resolve, reject) => { _resolve = () => { promise = null; resolve(); }; _reject = e => { error = e; promise = null; reject(e); }; }); function DelayedText({children}, data) { if (promise) { throw promise; } if (error) { throw error; } return <Model>{children}</Model>; } return [DelayedText, _resolve, _reject]; } </ins> it('should resolve HTML using W3C streams', async () => { function Text({children}) { return <span>{children}</span>;

return children; } <del> function makeDelayedText() { let error, _resolve, _reject; let promise = new Promise((resolve, reject) => { _resolve = () => { promise = null; resolve(); }; _reject = e => { error = e; promise = null; reject(e); }; }); function DelayedText({children}, data) { if (promise) { throw promise; } if (error) { throw error; } return <Text>{children}</Text>; } return [DelayedText, _resolve, _reject]; } const [Friends, resolveFriends] = makeDelayedText(); const [Name, resolveName] = makeDelayedText(); const [Posts, resolvePosts] = makeDelayedText(); const [Photos, resolvePhotos] = makeDelayedText(); const [Games, , rejectGames] = makeDelayedText(); </del> <ins> const [Friends, resolveFriends] = makeDelayedText(Text); const [Name, resolveName] = makeDelayedText(Text); const [Posts, resolvePosts] = makeDelayedText(Text); const [Photos, resolvePhotos] = makeDelayedText(Text); const [Games, , rejectGames] = makeDelayedText(Text); </ins> // View function ProfileDetails({avatar}) {

expect(reportedErrors).toEqual([]); });  it('should close the stream upon completion when rendering to W3C streams', async () => { const {Suspense} = React; // Model function Text({children}) { return children; } const [Friends, resolveFriends] = makeDelayedText(Text); const [Name, resolveName] = makeDelayedText(Text); const [Posts, resolvePosts] = makeDelayedText(Text); const [Photos, resolvePhotos] = makeDelayedText(Text); // View function ProfileDetails({avatar}) { return (
 <Name>:name:</Name> {avatar}
 ); } function ProfileSidebar({friends}) { return (
 <Photos>:photos:</Photos> {friends}
 ); } function ProfilePosts({posts}) { return
{posts}
; } function ProfileContent() { return ( <Suspense fallback="(loading everything)"> <ProfileDetails avatar={<Text>:avatar:</Text>} /> <Suspense fallback={
(loading sidebar)
}> <ProfileSidebar friends={<Friends>:friends:</Friends>} /> </Suspense> <Suspense fallback={
(loading posts)
}> <ProfilePosts posts={<Posts>:posts:</Posts>} /> </Suspense> </Suspense> ); } const model = { rootContent: <ProfileContent />, }; const stream = ReactServerDOMWriter.renderToReadableStream( model, webpackMap, ); const reader = stream.getReader(); const decoder = new TextDecoder(); let flightResponse = ''; let isDone = false; reader.read().then(function progress({done, value}) { if (done) { isDone = true; return; } flightResponse += decoder.decode(value); return reader.read().then(progress); }); // Advance time enough to trigger a nested fallback. jest.advanceTimersByTime(500); await act(async () => {}); expect(flightResponse).toContain('(loading everything)'); expect(flightResponse).toContain('(loading sidebar)'); expect(flightResponse).toContain('(loading posts)'); expect(flightResponse).not.toContain(':friends:'); expect(flightResponse).not.toContain(':name:'); await act(async () => { resolveFriends(); }); expect(flightResponse).toContain(':friends:'); await act(async () => { resolveName(); }); expect(flightResponse).toContain(':name:'); await act(async () => { resolvePhotos(); }); expect(flightResponse).toContain(':photos:'); await act(async () => { resolvePosts(); }); expect(flightResponse).toContain(':posts:'); // Final pending chunk is written; stream should be closed. expect(isDone).toBeTruthy(); });  });

if (request.status === CLOSED) { return; } <ins> if (request.destination !== null) { // We're already flowing. return; } </ins> request.destination = destination; try { flushCompletedQueues(request, destination);

if (request.status === CLOSED) { return; } <ins> if (request.destination !== null) { // We're already flowing. return; } </ins> request.destination = destination; try { flushCompletedChunks(request, destination);


Question:
This is not published to npm.
This is a left over artifact from the way our release script used to work. It shouldn't cause any problems, but if you'd like to submit a PR removing this entry that'd be okay too.

"files": [ "LICENSE", "README.md", <del> "build-info.json", </del> "index.js", "cjs/", "umd/",

"react-server": "./unstable-shared-subset.js", "default": "./index.js" }, <del> "./build-info.json": "./build-info.json", </del> <ins> "./package.json": "./package.json", </ins> "./jsx-runtime": "./jsx-runtime.js", "./jsx-dev-runtime": "./jsx-dev-runtime.js", "./": "./"


Question:
in a project that has and node error: Published package contains the following code: No absolute paths in bundle. successful evaluation.
Edit: Looks like was what broke this. My bad.
Fix has been published as 4.22.1. Sorry again.

), }; <del> const builtModulesDir = resolve( __dirname, '..', '..', 'build', 'oss-experimental', ); </del> module.exports = { mode: __DEV__ ? 'development' : 'production', devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',

libraryTarget: 'commonjs2', }, externals: { <del> react: resolve(builtModulesDir, 'react'), 'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'), 'react-is': resolve(builtModulesDir, 'react-is'), scheduler: resolve(builtModulesDir, 'scheduler'), </del> <ins> react: 'react', 'react-dom': 'react-dom', 'react-is': 'react-is', scheduler: 'scheduler', </ins> }, node: { // source-maps package has a dependency on 'fs'


Question:
react-devtools version: 4.22.0 npm -g install react-devtools react-devtools
This was broken because of . My apologies.
Fix has been published as 4.22.1. Sorry again.
react-devtools: 4.22.1 <img width="417" alt="Screen Shot 2021-12-15 at 1 09 33 PM" src="https://user-"react-devtools: 4.21 has no problem.
Thanks for confirming,

"bin": { "react-devtools": "./bin.js" }, <del> "files": [], </del> <ins> "files": [ "bin.js", "app.html", "app.js", "index.js", "icons" ], </ins> "scripts": { "start": "node bin.js" },


Question:
not public I have two code bases in a yarn workspaces linked monorepo. One is using react-three-fiber (the lib), and the other one is really thin wrapper around it with some simple UI, just couple of buttons. Both are using multiple (3) zustand stores. Every time react-devtools-extensions 21.0- Could not find ID for Fiber "App"
Hi I'm sorry you ran into this problem Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce it though. This means that it's going to be very hard for us to fix. Please help us by providing a link to a CodeSandbox (), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.) Here are some tips for providing a minimal example:
I have experienced the same issue in Firefox, also with the use of react-three-fiber and zustand. If it helps isolate the issue, I only experience it for development builds but do not experience it for production builds. Repository: Browser: Firefox 95.0.2 (64-bit), Windows 10 Sample video: https://user- The error message in the pane:
Thanks for the repro,
I, too, have had this issue and spent a bit of time reducing the surface area to a really small combo of react + canvas. Hopefully, this breaks in a way that is helpful. DevTools version Error message Error call stack Error component stack GitHub query string !
Possibly fixed by . Possible requires an additional change made to this method to replace with (and we can just skip Fibers with a null ID).
Repro from by repo repo in your browser of choice. to the dev tools, and you should see the error
Fix released on Jan 24 as version 4.23.0: Give it a couple of days to propagate to all of the browsers. (Chrome usually takes the longest.)

expect(data.commitData).toHaveLength(1); expect(data.operations).toHaveLength(1); }); <ins> it('should not throw while initializing context values for Fibers within a not-yet-mounted subtree', () => { const promise = new Promise(resolve => {}); const SuspendingView = () => { throw promise; }; const App = () => { return ( <React.Suspense fallback="Fallback"> <SuspendingView /> </React.Suspense> ); }; const container = document.createElement('div'); utils.act(() => legacyRender(<App />, container)); utils.act(() => store.profilerStore.startProfiling()); }); </ins> });

// Fibers only store the current context value, // so we need to track them separately in order to determine changed keys. function crawlToInitializeContextsMap(fiber: Fiber) { <del> updateContextsForFiber(fiber); let current = fiber.child; while (current !== null) { crawlToInitializeContextsMap(current); current = current.sibling; </del> <ins> const id = getFiberIDUnsafe(fiber); // Not all Fibers in the subtree have mounted yet. // For example, Offscreen (hidden) or Suspense (suspended) subtrees won't yet be tracked. // We can safely skip these subtrees. if (id !== null) { updateContextsForFiber(fiber); let current = fiber.child; while (current !== null) { crawlToInitializeContextsMap(current); current = current.sibling; } </ins> } }


Question: Following up on (/cc ) React version: 18.0.0-rc.3-next-- an update (e.g. ) from within Link to code example: Update is applied and no warning is issued. According to cannot schedule updates. But seems to "work". Maybe this is just incidental because it's the first render? I got the impression that this should definitely cause a warning (not implemented) but I wonder if we also should consistently drop updates from ?

restorePendingUpdaters, addTransitionStartCallbackToPendingTransition, addTransitionCompleteCallbackToPendingTransition, <ins> setIsRunningInsertionEffect, </ins> } from './ReactFiberWorkLoop.new'; import { NoFlags as NoHookEffect,

restorePendingUpdaters, addTransitionStartCallbackToPendingTransition, addTransitionCompleteCallbackToPendingTransition, <ins> setIsRunningInsertionEffect, </ins> } from './ReactFiberWorkLoop.old'; import { NoFlags as NoHookEffect,

} } <ins> if (__DEV__) { if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(true); } } </ins> safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy); <ins> if (__DEV__) { if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(false); } } </ins> if (enableSchedulingProfiler) { if ((flags & HookPassive) !== NoHookEffect) {

// Mount const create = effect.create; <ins> if (__DEV__) { if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(true); } } </ins> effect.destroy = create(); <ins> if (__DEV__) { if ((flags & HookInsertion) !== NoHookEffect) { setIsRunningInsertionEffect(false); } } </ins> if (enableSchedulingProfiler) { if ((flags & HookPassive) !== NoHookEffect) {

let currentEventTime: number = NoTimestamp; let currentEventTransitionLane: Lanes = NoLanes; <ins> let isRunningInsertionEffect = false; </ins> export function getWorkInProgressRoot(): FiberRoot | null { return workInProgressRoot; }

): FiberRoot | null { checkForNestedUpdates(); <ins> if (__DEV__) { if (isRunningInsertionEffect) { console.error('useInsertionEffect must not schedule updates.'); } } </ins> const root = markUpdateLaneFromFiberToRoot(fiber, lane); if (root === null) { return null;

nearestMountedAncestor: Fiber | null, error: mixed, ) { <ins> if (__DEV__) { setIsRunningInsertionEffect(false); } </ins> if (sourceFiber.tag === HostRoot) { // Error was thrown at the root. There is no parent, so the root // itself should capture it.

} } } <ins> export function setIsRunningInsertionEffect(isRunning: boolean): void { if (__DEV__) { isRunningInsertionEffect = isRunning; } } </ins>

}), ).toThrow('is not a function'); }); <ins> it('warns when setState is called from insertion effect setup', () => { function App(props) { const [, setX] = useState(0); useInsertionEffect(() => { setX(1); if (props.throw) { throw Error('No'); } }, [props.throw]); return null; } const root = ReactNoop.createRoot(); expect(() => act(() => { root.render(<App />); }), ).toErrorDev(['Warning: useInsertionEffect must not schedule updates.']); expect(() => { act(() => { root.render(<App throw={true} />); }); }).toThrow('No'); // Should not warn for regular effects after throw. function NotInsertion() { const [, setX] = useState(0); useEffect(() => { setX(1); }, []); return null; } act(() => { root.render(<NotInsertion />); }); }); it('warns when setState is called from insertion effect cleanup', () => { function App(props) { const [, setX] = useState(0); useInsertionEffect(() => { if (props.throw) { throw Error('No'); } return () => { setX(1); }; }, [props.throw, props.foo]); return null; } const root = ReactNoop.createRoot(); act(() => { root.render(<App foo="hello" />); }); expect(() => { act(() => { root.render(<App foo="goodbye" />); }); }).toErrorDev(['Warning: useInsertionEffect must not schedule updates.']); expect(() => { act(() => { root.render(<App throw={true} />); }); }).toThrow('No'); // Should not warn for regular effects after throw. function NotInsertion() { const [, setX] = useState(0); useEffect(() => { setX(1); }, []); return null; } act(() => { root.render(<NotInsertion />); }); }); </ins> }); describe('useLayoutEffect', () => {


Question:
profiling "a" into the input profiling ! Every time No response 24.3- No response No response No response No response
Hey, I tried the steps you mentioned with the same version of Dev Tools and it works for me (image attached) on Chrome (Version 100.0.4896.127 (Official Build) (64-bit)), could you also mention the browser and its version along with your operating system and version. !
I linked the wrong codesandbox. Let me update it. If you wrap ValueReader in forwardRef you should be able to reproduce
Updated codesandbox. should reproduce

case ContextConsumer: case MemoComponent: case SimpleMemoComponent: <ins> case ForwardRef: </ins> // For types that execute user code, we check PerformedWork effect. // We don't reflect bailouts (either referential or sCU) in DevTools. // eslint-disable-next-line no-bitwise


Question:
Unfortunately I don't know how to reproduce this bug. It was just logged to Sentry. It seems like there's a logic bug here though: If is null or is empty, then would be 0 still– and this statement would result in an undefined entry: Only once react-devtools-inline 24.4 Error: can't access property "id", n is undefined No response No response
Not sure if will fix your issue. Let me know if you can get a repro!

} break; case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': { <del> if (store.errorCount === 0 && store.warningCount === 0) { </del> <ins> const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings(); if (elementIndicesWithErrorsOrWarnings.length === 0) { </ins> return state; } <del> const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings(); </del> let flatIndex = 0; if (selectedElementIndex !== null) { // Resume from the current position in the list.

break; } case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': { <del> if (store.errorCount === 0 && store.warningCount === 0) { </del> <ins> const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings(); if (elementIndicesWithErrorsOrWarnings.length === 0) { </ins> return state; } <del> const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings(); </del> let flatIndex = -1; if (selectedElementIndex !== null) { // Resume from the current position in the list.


Question:
For checking whenever my project will work correctly, when I run a command , errors which are shown below occurred. ! When I pass a first argument which is an object to , , , I can repro the errors. for example, Before a few days, the errors had never occured. When I disable DevTools, the errors calm down. I think, the errors may be caused by the codes which are shown below. Every time No response No response No response No response No response No response
The same error happens in my case. Basically I cant use becasue it shows the same error. I think it is a bug. Extension was updated just yesterday.
Experiencing the same issue while having the React Developer Tools extension enabled. Disabling the extension prevents the error from occurring.
Sounds like this is only on the latest extension release (4.24.5). What's your browser and its version? Edit: NVM I can reproduce now. Looking into this.
This is a bug. We’ll be releasing a fix asap.
Hey! I have a similar issue. I can use console log for printing string, but putting any functionality or variables causes the error
Hey! Thanks for reporting this bug and sorry for the inconvenience! If you are experiencing this issue, there are 3 temporary solutions: on "Hide logs during second render in Strict Mode" in the DevTools settings (click the gear button in the Components tab) <img width="439" alt="image" src="https://user-"for now a string argument to your For now, I've unpublished the extension on the Chrome Web Store to prevent people from installing the buggy version. We've submitted a new version with the bugfix to the Chrome Web Store, and the extension will come back online once the review process is done. Firefox and Microsoft Edge has not been affected, and an extension without this bug is still available for and .
Thank you so much!
updated my comment above with more and better workarounds!
A new version with the bug fix is on Chrome Web Store now:

inputArgs === undefined || inputArgs === null || inputArgs.length === 0 || <ins> typeof inputArgs[0] !== 'string' || </ins> // Matches any of %c but not %%c <del> (typeof inputArgs[0] === 'string' && inputArgs[0].match(/([^%]|^)(%c)/g)) || </del> <ins> inputArgs[0].match(/([^%]|^)(%c)/g) || </ins> style === undefined ) { return inputArgs;


Question:
(local development) "Reload and profile" is enabled for Flamegraph: <img width="724" alt="Screenshot 2022-05-23 at 21 28 07" src="https://user-"But disabled for Timeline: <img width="671" alt="Screenshot 2022-05-23 at 21 28 12" src="https://user-"And yet I can "reload and profile" in Flamegraph, then switch to Timeline and it works. So this doesn't add up. Every time No response No response No response No response No response No response
Maybe related, a "reloaded" Timeline profile appears too much shifted to the left and thus a bit borked. See overlap in the left side. <img width="963" alt="Screenshot 2022-05-23 at 21 31 57" src="https://user-"
Just wanna confirm, by "borked" you mean some information is covered up? If so, does scrolling and dragging help?
Oh I see, that's just existing behavior. If I zoom in, then it helps, yea. So let's ignore that part.

<RecordToggle disabled={!supportsProfiling} />  <ReloadAndProfileButton disabled={selectedTabID === 'timeline' || !supportsProfiling} />   <ReloadAndProfileButton disabled={!supportsProfiling} />  <ClearProfilingDataButton /> <ProfilingImportExportButtons />


Question: <!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --This may be the same kind of , but I can't figure out the changes from CHANGELOG (I'm not sure if this is a bug). If there are no changes, it would be helpful to note that in the CHANGELOG. React version: N/A <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --Link to code example: N/A <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --Changes since v4.5.0 of eslint-plugin-react-hooks are not listed in CHANGELOG. Changes since v4.5.0 of eslint-plugin-react-hooks are listed in CHANGELOG.

<ins> ## 4.5.0 * Fix false positive error with large number of branches. ([@scyron6](https://github.com/scyron6) in [#24287](https://github.com/facebook/react/pull/24287)) </ins> ## 4.4.0 * No changes, this was an automated release together with React 18.


Question:
In React 17 it was required to import ReactDOMServer using the js extension if on Node 17, unless was set. In React 18 you cannot use the .js extension because it is not exported. You end up with this error: My proposal that fixes the problem is to add to the list of exports in React version: 17.0.2 vs 18.2.0
It's also worth noting that was dropped in Node 19 so there would have to be yet another workaround using which is less than ideal.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Bump
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

4. Trigger an update to the DOM. It's worth noting that React will handle new return values of `render()` by <del> making the mininal set of mutations necessary to bring the DOM up-to-date. In </del> <ins> making the minimal set of mutations necessary to bring the DOM up-to-date. In </ins> this case, only the `textContent` of the rendered link will be mutated. In summary:


Question:
we have property in css . In Plain JavaScript, we can directly pass a Number type and change the scale value like below scale:2.5 simulates the shorthand for transform: scale(2.5) Similarly I tried to do the Above in React, but it does not work as of now and only can work with string, the fix i took is adding it as a unitless Number in the file since it accepts the css properties accepting number , doing the same and running the fixtures standalone file , it is working the way as i expected Before the changes https://user- After the changes https://user-
cc

opacity: true, order: true, orphans: true, <ins> scale: true, </ins> tabSize: true, widows: true, zIndex: true,


Question:
React version: "eslint-plugin-react-hooks": "^4.2.0" Link to code example: (eslint-plugin-react-hooks) did not fire when it is inside of a Promise block. Please find the detailed explanation in example code below. thx
How do you use hooks inside promises? Hooks should only be called in the body of components
that is right, but I was not aware of it when I code it. And I think should have caught the error. Can you update the code for to make sure the bug won't fall through the crack? To be specific, the hook I was trying to access inside of promise is , which is about injecting the relay environment to handle the GraphQL query/mutation. Because Eslint did not capture this issue, I merged the bug into production until users complained...
This is described in the documentation and any tutorials. I'm not the maintainer of react, but it seems to me that the plugin should not check such things.
I think this issue is actually the anon function, which is reported here: Leaving this open to confirm fixing anon function fixes this.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

} `, }, <ins> { code: normalizeIndent` export const notAComponent = () => { return () => { useState(); } } `, // TODO: this should error but doesn't. // errors: [functionError('use', 'notAComponent')], }, { code: normalizeIndent` export default () => { if (isVal) { useState(0); } } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, { code: normalizeIndent` function notAComponent() { return new Promise.then(() => { useState(); }); } `, // TODO: this should error but doesn't. // errors: [genericError('useState')], }, </ins> ], invalid: [ {


Question:
It seems that with the latest update of Chrome and React DevTools, it cannot detect pages as using React on incognito. Screenshot attached below: <img width="518" alt="image" src="https://user-"Chrome version: 112.0.5615.137 (arm64) React DevTools version: 4.27.6 (4/20/2023) Every time No response No response No response No response No response No response
Thanks for reporting, looking into this. Can reproduce with the version 4.27.6 from Chrome web store, but unable to reproduce with a local build. Something weird happens in incognito mode with registering content scripts for extensions, which are downloaded from store.
Hello, I have the same bug. FYI. OS: Ubuntu 22.04.2 LTS. Chrome: version 112.0.5615.165 (official build) (64 bits). React Developer Tools: version 4.27.6 (2023-04-20). React Developer Tools description: Adds React debugging tools to the Chrome Developer Tools. Created from revision on 4/20/2023. Firefox: version 112.0.2 (64 bits). React Developer Tools: version 4.27.1 (2023-05-01). React Developer Tools description: Adds React debugging tools to the Firefox Developer Tools. Created from revision on 12/6/2022.
Hello. Having the same bug OS: MacOs Venture 13.3.1 (22E261) React Dev Tools: version 4.27.6 (4/20/2023) Chrome: Version 112.0.5615.137 (Official Build) (arm64)
Same issue OS: MacOs Venture 13.3.1 React Dev Tools: version 4.27.6 (4/20/2023) Chrome: Version 112.0.5615.137 (Official Build) (x86_64)
This is still an issue after code changes. Removed and re- devtools. Tested in incognito. OS: MacOs Venture 13.3.1 React Dev Tools: version 4.27.6 (4/20/2023) Chrome: Version 112.0.5615.137 (Official Build) (x86_64)
The version, which contains this fix is not published yet. I will do a new release this week, so you should expect it to be available in Chrome web store next week. Sorry for any inconvenience caused.

const ports = {}; <del> if (!IS_FIREFOX) { // equivalent logic for Firefox is in prepareInjection.js // Manifest V3 method of injecting content scripts (not yet supported in Firefox) // Note: the "world" option in registerContentScripts is only available in Chrome v102+ // It's critical since it allows us to directly run scripts on the "main" world on the page // "document_start" allows it to run before the page's scripts // so the hook can be detected by react reconciler chrome.scripting.registerContentScripts( [ { id: 'hook', matches: ['<all_urls>'], js: ['build/installHook.js'], runAt: 'document_start', world: chrome.scripting.ExecutionWorld.MAIN, }, { id: 'renderer', matches: ['<all_urls>'], js: ['build/renderer.js'], runAt: 'document_start', world: chrome.scripting.ExecutionWorld.MAIN, }, ], function () { // When the content scripts are already registered, an error will be thrown. // It happens when the service worker process is incorrectly duplicated. if (chrome.runtime.lastError) { console.error(chrome.runtime.lastError); } </del> <ins> async function dynamicallyInjectContentScripts() { const contentScriptsToInject = [ { id: 'hook', matches: ['<all_urls>'], js: ['build/installHook.js'], runAt: 'document_start', world: chrome.scripting.ExecutionWorld.MAIN, </ins> }, <del> ); </del> <ins> { id: 'renderer', matches: ['<all_urls>'], js: ['build/renderer.js'], runAt: 'document_start', world: chrome.scripting.ExecutionWorld.MAIN, }, ]; try { // For some reason dynamically injected scripts might be already registered // Registering them again will fail, which will result into // __REACT_DEVTOOLS_GLOBAL_HOOK__ hook not being injected await chrome.scripting.unregisterContentScripts({ ids: contentScriptsToInject.map(s => s.id), }); // equivalent logic for Firefox is in prepareInjection.js // Manifest V3 method of injecting content script // TODO(hoxyq): migrate Firefox to V3 manifests // Note: the "world" option in registerContentScripts is only available in Chrome v102+ // It's critical since it allows us to directly run scripts on the "main" world on the page // "document_start" allows it to run before the page's scripts // so the hook can be detected by react reconciler await chrome.scripting.registerContentScripts(contentScriptsToInject); } catch (error) { console.error(error); } } if (!IS_FIREFOX) { dynamicallyInjectContentScripts(); </ins> } chrome.runtime.onConnect.addListener(function (port) {


Question:
local repo Loading a React component with the React profiler recording enabled Every time react-devtools-extensions 27.6- Cannot add node "1751" because a node with that id is already in the Store. No response
! Same issue here. Devtools version: 4.27.6 (4/20/2023)
Same issue here. Using NextJS 13.4.1 !
Same issue here. Happens, when adding Canvas element. version 8.13.0 <img width="682" alt="Снимок экрана 2023-05-10 в 22 31 40" src=""
Same issue: !
same... do you all have code for a chrome extension?
same with devtools version: 4.27.7 (5/7/2023) !
I've installed a React profiler via Chrome web store () which created a second copy of an extension under "From other sources" title in extensions panel, after that I've deleted a copy of an react dev tools that was 'native' to edge, and voila, profiler works.
Hey folks, the only reproducible example I've found is mentioned in I've merged a fix for it, but need more input from you: you are constantly facing this issue, can you post here a repro please? you please follow and try to reproduce this error again?
I am no longer seeing this error after installing the release you linked in .
Great, thank you! This fix will be included in v4.27.8 release, which I will publish this week.

{ "name": "react-devtools-core", <del> "version": "4.27.7", </del> <ins> "version": "4.27.8", </ins> "description": "Use react-devtools outside of the browser", "license": "MIT", "main": "./dist/backend.js",

"manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Chrome Developer Tools.", <del> "version": "4.27.7", "version_name": "4.27.7", </del> <ins> "version": "4.27.8", "version_name": "4.27.8", </ins> "minimum_chrome_version": "102", "icons": { "16": "icons/16-production.png",

"manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", <del> "version": "4.27.7", "version_name": "4.27.7", </del> <ins> "version": "4.27.8", "version_name": "4.27.8", </ins> "minimum_chrome_version": "102", "icons": { "16": "icons/16-production.png",

"manifest_version": 2, "name": "React Developer Tools", "description": "Adds React debugging tools to the Firefox Developer Tools.", <del> "version": "4.27.7", </del> <ins> "version": "4.27.8", </ins> "applications": { "gecko": { "id": "@react-devtools",

{ "name": "react-devtools-inline", <del> "version": "4.27.7", </del> <ins> "version": "4.27.8", </ins> "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js",

{ "private": true, "name": "react-devtools-timeline", <del> "version": "4.27.7", </del> <ins> "version": "4.27.8", </ins> "license": "MIT", "dependencies": { "@elg/speedscope": "1.9.0-a6f84db",

--- <ins> ### 4.27.8 May 17, 2023 #### Bugfixes * Fixed duplicated backend activation with multiple renderers ([hoxyq](https://github.com/hoxyq) in [#26807](https://github.com/facebook/react/pull/26807)) --- </ins> ### 4.27.7 May 4, 2023

{ "name": "react-devtools", <del> "version": "4.27.7", </del> <ins> "version": "4.27.8", </ins> "description": "Use react-devtools outside of the browser", "license": "MIT", "repository": {


Question:
the codepen linked above. sure to open the Debug View, so codepen doesn't add any additional iframes (). : Warning in the Console tab: . Error in the Components tab: . After dismissing the error, all components seem to be accounted for (you might need to adjust the "Hide components where..." option). In my actual application the error pops up for every change in the tree, making the devtools virtually unusable. Note: This only seems to happen if the iframe is some time after the initial React tree was mounted in the parent window. When I remove the so the iframe is synchronously, I no longer see any warnings. Related issues: Every time No response 27.7 (5/7/2023) in Google Chrome Version 112.0.5615.165 (Official Build) (64-bit) Cannot add node "3" because a node with that id is already in the Store. No response No response
Hey thanks for reporting this. Can confirm this issue, but I am getting different error on my side and only when refreshing the page. Extension works as expected for me when I open the page for the first time. I will put up a fix for this.
can you please also validate this on your side? You can download a build from our CircleCI pipeline here - Chrome extension should be in archive, you can then install it via dialog in
Yes! I'm no longer seeing the warning/errors when I use the build you linked. Thanks for the fix :)
Great, thanks for helping resolving this. This will be included in v4.27.8 release, which I will publish this week.

initBackend, setupNativeStyleEditor, }); hook.emit('devtools-backend-installed', COMPACT_VERSION_NAME); }

// register renderers that have already injected themselves. hook.renderers.forEach(renderer => { <del> registerRenderer(renderer); </del> <ins> registerRenderer(renderer, hook); </ins> }); // Activate and remove from required all present backends, registered within the hook

// register renderers that inject themselves later. hook.sub('renderer', ({renderer}) => { <del> registerRenderer(renderer); </del> <ins> registerRenderer(renderer, hook); </ins> updateRequiredBackends(); });

const requiredBackends = new Set<string>(); <del> function registerRenderer(renderer: ReactRenderer) { </del> <ins> function registerRenderer(renderer: ReactRenderer, hook: DevToolsHook) { </ins> let version = renderer.reconcilerVersion || renderer.version; if (!hasAssignedBackend(version)) { version = COMPACT_VERSION_NAME; } <del> requiredBackends.add(version); </del> <ins> // Check if required backend is already activated, no need to require again if (!hook.backends.has(version)) { requiredBackends.add(version); } </ins> } function activateBackend(version: string, hook: DevToolsHook) {

if (!backend) { throw new Error(`Could not find backend for version "${version}"`); } const {Agent, Bridge, initBackend, setupNativeStyleEditor} = backend; const bridge = new Bridge({ listen(fn) {

// tell the service worker which versions of backends are needed for the current page function updateRequiredBackends() { <ins> if (requiredBackends.size === 0) { return; } </ins> window.postMessage( { source: 'react-devtools-backend-manager',


Question:
The Strict mode warning badge points to which points to the strict mode section in instead of . Badge: <img width="273" alt="Screenshot 2023-05-16 at 20 20 59" src=""Code: Every time No response No response No response No response No response No response
Thanks for spotting, anyone interested in opening a PR with updating it to
interested, can i proceed and open a PR ? here is the PR
Sorry mate I did not see your comment before starting
Thanks for your contributions Have to go with , as commented a bit earlier.

strictModeBadge = ( <a className={styles.StrictModeNonCompliant} <del> href="https://fb.me/devtools-strict-mode" </del> <ins> href="https://react.dev/reference/react/StrictMode" </ins> rel="noopener noreferrer" target="_blank" title="This component is not running in StrictMode. Click to learn more.">


Question:
react/packages/react says Copyright (c) Facebook Platforms, Inc. and affiliates, but should be Copyright (c) Meta Platforms, Inc. and affiliates as it is more consistent
Hello! This is my first time contributing to open source. Is anyone already working on this issue?
Hi, I would like to contribute in this. if anyone already working on this issues?
Hello, I would like to contribute to this assign it to me.
<bHi,</bI would like to contribute in this. if anyone already working on this issues?
This issue is already fixed. by

/** <del> * Copyright (c) Facebook, Inc. and its affiliates. </del> <ins> * Copyright (c) Meta Platforms, Inc. and its affiliates. </ins> * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree.


Question:
<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: 18.3.0-canary-- radio buttons that toggle in selecting each radio button, is no longer called <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --Link to code example: The following CodeSandbox demonstrates the issue with the current react canary version. The issue is not present when react & react-dom versions are changed to stable 18.2.0 <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --'s prop is not called on subsequent clicks of the input 's prop should be called on subsequent clicks of the input
As far as I an tell this also repros without toggling : So it's just about changing the controlled delayed.
The problem was introduced with . The previous version works.
It looks like it was this change that introduced this bug:
what are ways to fix this issue?
FYI, I find something by investigating, as below: : isn't called because here is falsy in that process. PS: In our case, should be equal to . Diving into the inner functions as the followings. : : : We can find the key is that the tracked value should be different from the value get from () in our case. We can believe the tracked value was not updated after the delayed state change, which cause the issue. Analysis by reproduction steps (Please visit , which can print the tracked values): : One: checked ( is ), and the tracked value is Two: unchecked, and the tracked value is 'Two', and wait for delayed : is called One: unchecked, and the tracked value is Two: checked, and the tracked value is 'One', and wait for the delayed : is called One: checked, and the tracked value is Two: unchecked, and the tracked value is 'Two', won't call again PS: The tracked value can be updated at the end of the event handler (by ), so Step 2 will result in the correct tracked values. So, I think one solution is to update the tracked value (at the end of the commit mutation phase) when the checked prop changes. I'd like to submit a PR to fix it. Any corrections or suggestions will be appreciated, (for I'm not sure if I miss anything important).
I tried another way to understand what caused the bug. I just checked the between a working commit () and non-working commit () and figured out that the bug happens after removing in function of . just restoring or just adding the bug disappear. Maybe the problem is explained in this is not updated and will result null/undefined and the radio is no more controlled? You can check this . I've also made a change to to start devtools server with a simple radio example. To run the server: run in the root directory and in directory. from to the root directory run from folder execute (better to open another shell for this command) go to

} } <del> if (checked != null && node.checked !== !!checked) { node.checked = checked; </del> <ins> if (checked != null) { // Important to set this even if it's not a change in order to update input // value tracking with radio buttons // TODO: Should really update input value tracking for the whole radio // button group in an effect or something (similar to #27024) node.checked = checked && typeof checked !== 'function' && typeof checked !== 'symbol'; </ins> } if (

it('should not incur unnecessary DOM mutations for boolean properties', () => { const container = document.createElement('div'); <del> function onChange() { // noop } ReactDOM.render( <input type="checkbox" onChange={onChange} checked={true} />, container, ); </del> <ins> ReactDOM.render(<audio muted={true} />, container); </ins> const node = container.firstChild; let nodeValue = true; const nodeValueSetter = jest.fn(); <del> Object.defineProperty(node, 'checked', { </del> <ins> Object.defineProperty(node, 'muted', { </ins> get: function () { return nodeValue; },

}), }); <del> ReactDOM.render( <input type="checkbox" onChange={onChange} checked={true} data-unrelated={true} />, container, ); expect(nodeValueSetter).toHaveBeenCalledTimes(0); expect(() => { ReactDOM.render( <input type="checkbox" onChange={onChange} />, container, ); }).toErrorDev( 'A component is changing a controlled input to be uncontrolled. This is likely caused by ' + 'the value changing from a defined to undefined, which should not happen. Decide between ' + 'using a controlled or uncontrolled input element for the lifetime of the component.', ); // This leaves the current checked value in place, just like text inputs. </del> <ins> ReactDOM.render(<audio muted={true} data-unrelated="yes" />, container); </ins> expect(nodeValueSetter).toHaveBeenCalledTimes(0); <del> expect(() => { ReactDOM.render( <input type="checkbox" onChange={onChange} checked={false} />, container, ); }).toErrorDev( ' A component is changing an uncontrolled input to be controlled. This is likely caused by ' + 'the value changing from undefined to a defined value, which should not happen. Decide between ' + 'using a controlled or uncontrolled input element for the lifetime of the component.', ); </del> <ins> ReactDOM.render(<audio muted={false} data-unrelated="ok" />, container); </ins> expect(nodeValueSetter).toHaveBeenCalledTimes(1); <del> ReactDOM.render( <input type="checkbox" onChange={onChange} checked={true} />, container, ); expect(nodeValueSetter).toHaveBeenCalledTimes(2); </del> }); it('should ignore attribute list for elements with the "is" attribute', () => {

assertInputTrackingIsCurrent(container); }); <ins> it('should control radio buttons if the tree updates during render (case 2; #26876)', () => { let thunk = null; function App() { const [disabled, setDisabled] = React.useState(false); const [value, setValue] = React.useState('one'); function handleChange(e) { setDisabled(true); // Pretend this is in a setTimeout or something thunk = () => { setDisabled(false); setValue(e.target.value); }; } return ( <> <input type="radio" name="fruit" value="one" checked={value === 'one'} onChange={handleChange} disabled={disabled} /> <input type="radio" name="fruit" value="two" checked={value === 'two'} onChange={handleChange} disabled={disabled} /> </> ); } ReactDOM.render(<App />, container); const [one, two] = container.querySelectorAll('input'); expect(one.checked).toBe(true); expect(two.checked).toBe(false); expect(isCheckedDirty(one)).toBe(true); expect(isCheckedDirty(two)).toBe(true); assertInputTrackingIsCurrent(container); // Click two setUntrackedChecked.call(two, true); dispatchEventOnNode(two, 'click'); expect(one.checked).toBe(true); expect(two.checked).toBe(false); expect(isCheckedDirty(one)).toBe(true); expect(isCheckedDirty(two)).toBe(true); assertInputTrackingIsCurrent(container); // After a delay... ReactDOM.unstable_batchedUpdates(thunk); expect(one.checked).toBe(false); expect(two.checked).toBe(true); expect(isCheckedDirty(one)).toBe(true); expect(isCheckedDirty(two)).toBe(true); assertInputTrackingIsCurrent(container); // Click back to one setUntrackedChecked.call(one, true); dispatchEventOnNode(one, 'click'); expect(one.checked).toBe(false); expect(two.checked).toBe(true); expect(isCheckedDirty(one)).toBe(true); expect(isCheckedDirty(two)).toBe(true); assertInputTrackingIsCurrent(container); // After a delay... ReactDOM.unstable_batchedUpdates(thunk); expect(one.checked).toBe(true); expect(two.checked).toBe(false); expect(isCheckedDirty(one)).toBe(true); expect(isCheckedDirty(two)).toBe(true); assertInputTrackingIsCurrent(container); }); </ins> it('should warn with value and no onChange handler and readOnly specified', () => { ReactDOM.render( <input type="text" value="zoink" readOnly={true} />,


Question:
React version: 18.2.0 a tiny app that uses + suspends during hydration + has a hydration mismatch, for example: (Full code in ) the app and observe that the suspense fallback is never mounted , wrap the element with a : () the app and observe that the suspense fallback is now mounted Code example: · The fallback is rendered inconsistently – depending on whether the element that suspends is wrapped with a ?! The fallback is rendered either never, or always, no matter if the element that suspends is wrapped with anything.
Spent a bunch of time debugging this, and I think I understand what’s causing this. Let’s say we’re trying to hydrate the following tree: Here’s why the bug happens: hydrating the tree, React enters the and starts walking its children. At some point, it walks over the node – and encounters a hydration mismatch. This causes React to find the nearest suspense boundary and . (Later, and switches the boundary to client-side rendering, .) , after setting the flag, React does not switch the to client rendering immediately. Instead, it walks the remaining siblings (in this case, two s and ) and then exits the subtree. is where the inconsistency lies. In the normal case (without ), React finishes walking all siblings, walks back up to , realizes that has set, and client-renders again from scratch. However, if one of the siblings React walks over () suspends, React . This effectively disables mismatch handling (until later) – instead, suspends, as if there was no hydration mismatch. And because it’s still hydrating, Suspense keeps the server HTML instead of rendering the fallback. This behavior disappears if lives in another part of the tree (not in direct siblings): With this tree, React won’t walk over (because it’s inside a sibling, and React won’t enter siblings after it encountered a hydration error). This means React will follow the normal code path → re-render the Suspense boundary from scratch instead of hydrating it → suspend that boundary when it finally encounters → and render the Suspense fallback. a result, if is a direct sibling to the hydration mismatch, React will keep the server HTML until the component unsuspends. If it’s not, React will render the Suspense fallback. This is (imo) the bug: React’s behavior shouldn’t depend on where inside the boundary the hydration mismatch happens. Just from the code perspective, it feels easier/cheaper to keep the “normal” case – always resetting the boundary if there’s a hydration mismatch. This also matches that says that is rerendered from scratch on a mismatch – this is good because every edge case is an overhead that devs need to learn. But from the UX perspective, I’d maybe prefer React to keep the server HTML until the boundary unsuspends? If we keep the server HTML, the UI will go through two states: Server HTML → Client HTML. Both of these should be similar, despite a minor hydration mismatch. If we reset the boundary, the UI will jump through Server HTML → “Loading...” fallback → Client HTML, which feels like a worse UX. IDK, feels like a hard choice to make (good thing it’s not mine I guess ^_^)
Sorry for the direct ping – I see you referenced this bug in some other PR; any chance this bug can be set to “Confirmed”? (It still reproduces even in )
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

} });  it('does not show a fallback if mismatch is after suspending', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child() { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return 'Hello'; } } function Component({shouldMismatch}) { Scheduler.log('Component'); if (shouldMismatch && client) { return
Mismatch
; } return
Component
; } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Child /> <Component shouldMismatch={true} /> </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Hello', 'Component']); expect(container.innerHTML).toBe( 'Hello
Component
', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll(['Suspend']); jest.runAllTimers(); // !! Unchanged, continue showing server content while suspended. expect(container.innerHTML).toBe( 'Hello
Component
', ); suspend = false; resolve(); await promise; await waitForAll([ // first pass, mismatches at end 'Hello', 'Component', 'Hello', 'Component', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // Client rendered - suspense comment nodes removed. expect(container.innerHTML).toBe('Hello
Mismatch
'); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'section', 'n' + '    in article (at **)n' + '    in Component (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } }); it('does not show a fallback if mismatch is child of suspended component', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child({children}) { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return
{children}
; } } function Component({shouldMismatch}) { Scheduler.log('Component'); if (shouldMismatch && client) { return
Mismatch
; } return
Component
; } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Child> <Component shouldMismatch={true} /> </Child> </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Hello', 'Component']); expect(container.innerHTML).toBe( '

Component

', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll(['Suspend']); jest.runAllTimers(); // !! Unchanged, continue showing server content while suspended. expect(container.innerHTML).toBe( '

Component

', ); suspend = false; resolve(); await promise; await waitForAll([ // first pass, mismatches at end 'Hello', 'Component', 'Hello', 'Component', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe( '

Mismatch

', ); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'div', 'n' + '    in article (at **)n' + '    in Component (at **)n' + '    in div (at **)n' + '    in Child (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } }); it('does not show a fallback if mismatch is parent and first child suspends', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child({children}) { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return
{children}
; } } function Component({shouldMismatch, children}) { Scheduler.log('Component'); if (shouldMismatch && client) { return (
 {children}
Mismatch

 ); } return (
 {children}
Component

 ); } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Component shouldMismatch={true}> <Child /> </Component> </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Component', 'Hello']); expect(container.innerHTML).toBe( '

Component

', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll(['Component', 'Suspend']); jest.runAllTimers(); // !! Unchanged, continue showing server content while suspended. expect(container.innerHTML).toBe( '

Component

', ); suspend = false; resolve(); await promise; await waitForAll([ // first pass, mismatches at end 'Component', 'Hello', 'Component', 'Hello', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe( '

Mismatch

', ); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'div', 'n' + '    in article (at **)n' + '    in div (at **)n' + '    in Component (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } }); it('does show a fallback if mismatch is parent and second child suspends', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child({children}) { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return
{children}
; } } function Component({shouldMismatch, children}) { Scheduler.log('Component'); if (shouldMismatch && client) { return (

Mismatch
 {children}
 ); } return (

Component
 {children}
 ); } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Component shouldMismatch={true}> <Child /> </Component> </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Component', 'Hello']); expect(container.innerHTML).toBe( '

Component

', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll([ 'Component', 'Component', 'Suspend', 'Fallback', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // !! Client switches to suspense fallback. expect(container.innerHTML).toBe('Loading...'); suspend = false; resolve(); await promise; await waitForAll(['Component', 'Hello']); jest.runAllTimers(); // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe( '

Mismatch

', ); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'div', 'n' + '    in article (at **)n' + '    in div (at **)n' + '    in Component (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } }); it('does show a fallback if mismatch is in parent element only', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child({children}) { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return
{children}
; } } function Component({shouldMismatch, children}) { Scheduler.log('Component'); if (shouldMismatch && client) { return
{children}
; } return
{children}
; } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Component shouldMismatch={true}> <Child /> </Component> </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Component', 'Hello']); expect(container.innerHTML).toBe( '

', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll([ 'Component', 'Component', 'Suspend', 'Fallback', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // !! Client switches to suspense fallback. expect(container.innerHTML).toBe('Loading...'); suspend = false; resolve(); await promise; await waitForAll(['Component', 'Hello']); jest.runAllTimers(); // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe('

'); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'section', 'n' + '    in article (at **)n' + '    in Component (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } }); it('does show a fallback if mismatch is before suspending', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child() { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return 'Hello'; } } function Component({shouldMismatch}) { Scheduler.log('Component'); if (shouldMismatch && client) { return
Mismatch
; } return
Component
; } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Component shouldMismatch={true} /> <Child /> </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Component', 'Hello']); expect(container.innerHTML).toBe( '
Component
Hello', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll([ 'Component', 'Component', 'Suspend', 'Fallback', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // !! Client switches to suspense fallback. expect(container.innerHTML).toBe('Loading...'); suspend = false; resolve(); await promise; await waitForAll([ // first pass, mismatches at end 'Component', 'Hello', ]); jest.runAllTimers(); // Client rendered - suspense comment nodes removed expect(container.innerHTML).toBe('
Mismatch
Hello'); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'section', 'n' + '    in article (at **)n' + '    in Component (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } }); it('does show a fallback if mismatch is before suspending in a child', async () => { // We can't use the toErrorDev helper here because this is async. const originalConsoleError = console.error; const mockError = jest.fn(); console.error = (...args) => { mockError(...args.map(normalizeCodeLocInfo)); }; let client = false; let suspend = false; let resolve; const promise = new Promise(resolvePromise => { resolve = () => { suspend = false; resolvePromise(); }; }); function Child() { if (suspend) { Scheduler.log('Suspend'); throw promise; } else { Scheduler.log('Hello'); return 'Hello'; } } function Component({shouldMismatch}) { Scheduler.log('Component'); if (shouldMismatch && client) { return
Mismatch
; } return
Component
; } function Fallback() { Scheduler.log('Fallback'); return 'Loading...'; } function App() { return ( <Suspense fallback={<Fallback />}> <Component shouldMismatch={true} />
 <Child />
 </Suspense> ); } try { const finalHTML = ReactDOMServer.renderToString(<App />); const container = document.createElement('section'); container.innerHTML = finalHTML; assertLog(['Component', 'Hello']); expect(container.innerHTML).toBe( '
Component

Hello
', ); suspend = true; client = true; ReactDOMClient.hydrateRoot(container, <App />, { onRecoverableError(error) { Scheduler.log(error.message); }, }); await waitForAll([ 'Component', 'Component', 'Suspend', 'Fallback', 'Hydration failed because the initial UI does not match what was rendered on the server.', 'There was an error while hydrating this Suspense boundary. Switched to client rendering.', ]); jest.runAllTimers(); // !! Client switches to suspense fallback. expect(container.innerHTML).toBe('Loading...'); suspend = false; resolve(); await promise; await waitForAll([ // first pass, mismatches at end 'Component', 'Hello', ]); jest.runAllTimers(); // Client rendered - suspense comment nodes removed. expect(container.innerHTML).toBe( '
Mismatch

Hello
', ); if (__DEV__) { const secondToLastCall = mockError.mock.calls[mockError.mock.calls.length - 2]; expect(secondToLastCall).toEqual([ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s', 'article', 'section', 'n' + '    in article (at **)n' + '    in Component (at **)n' + '    in Suspense (at **)n' + '    in App (at **)', ]); } } finally { console.error = originalConsoleError; } });  it('calls the hydration callbacks after hydration or deletion', async () => { let suspend = false; let resolve;


Question:
<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: A slow loading script does not seem to cause React to suspend as expected from this description. a with a deliberate delay on the response that React canary does not suspend while the script is loading <!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. --Link to code example: <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --This example contains a script where the server takes six seconds to respond. It changes the text to once executed. Note that it immediately displays . I expect it to display the Suspense fallback message for six seconds before switching to around the same time that the switch is made.
I have the same problem with . suspense does not fallback
Thank you for raising this. This was actually an oversight when writing the documention. Script tags don't suspend since they're not blocking rendering HTML unlike CSS. We're just removing any mention of Suspense from this page:

title: Web Components - id: glossary title: React (Virtual) DOM Terminology <del> - title: Flux items: - id: flux-overview title: Flux Overview href: https://facebook.github.io/flux/docs/overview.html - id: flux-todo-list title: Flux TodoMVC Tutorial href: https://facebook.github.io/flux/docs/todo-list.html </del>


Question:
debugging my nextjs project to find out which component is slowing down my application by using react devtools profiler section. when i start recording by clcking the blue button it start recording. then when go to my page and navigate different page like first i sign in to my application and then navigate from home to my when i stop the recording this error occured. Every time react-devtools-extensions 2- Could not find node with id "464" in commit tree
best of luck
Hi thank you for reporting. should fix this. It's scheduled to be included in DevTools 6.0.0. Let us know if it's still happening in 6.0.0

}; onProfilingStatus: (isProfiling: boolean) => void = isProfiling => { <ins> if (this._isProfiling === isProfiling) { return; } </ins> if (isProfiling) { this._dataBackends.splice(0); this._dataFrontend = null;

}); } <del> if (this._isProfiling !== isProfiling) { this._isProfiling = isProfiling; </del> <ins> this._isProfiling = isProfiling; </ins> <del> // Invalidate suspense cache if profiling data is being (re-)recorded. // Note that we clear again, in case any views read from the cache while profiling. // (That would have resolved a now-stale value without any profiling data.) this._cache.invalidate(); </del> <ins> // Invalidate suspense cache if profiling data is being (re-)recorded. // Note that we clear again, in case any views read from the cache while profiling. // (That would have resolved a now-stale value without any profiling data.) this._cache.invalidate(); </ins> <del> this.emit('isProfiling'); </del> <ins> this.emit('isProfiling'); </ins> <del> // If we've just finished a profiling session, we need to fetch data stored in each renderer interface // and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI. // During this time, DevTools UI should probably not be interactive. if (!isProfiling) { this._dataBackends.splice(0); this._rendererQueue.clear(); </del> <ins> // If we've just finished a profiling session, we need to fetch data stored in each renderer interface // and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI. // During this time, DevTools UI should probably not be interactive. if (!isProfiling) { this._dataBackends.splice(0); this._rendererQueue.clear(); </ins> <del> // Only request data from renderers that actually logged it. // This avoids unnecessary bridge requests and also avoids edge case mixed renderer bugs. // (e.g. when v15 and v16 are both present) this._rendererIDsThatReportedProfilingData.forEach(rendererID => { if (!this._rendererQueue.has(rendererID)) { this._rendererQueue.add(rendererID); </del> <ins> // Only request data from renderers that actually logged it. // This avoids unnecessary bridge requests and also avoids edge case mixed renderer bugs. // (e.g. when v15 and v16 are both present) this._rendererIDsThatReportedProfilingData.forEach(rendererID => { if (!this._rendererQueue.has(rendererID)) { this._rendererQueue.add(rendererID); </ins> <del> this._bridge.send('getProfilingData', {rendererID}); } }); </del> <ins> this._bridge.send('getProfilingData', {rendererID}); } }); </ins> <del> this.emit('isProcessingData'); } </del> <ins> this.emit('isProcessingData'); </ins> } }; }


Question:
React GitHub page () ( branch) currently pointing to and then it redirects to So many redirects, can we update the content of file with , if it ok to do, then I am very happy to do the same and I'll contribution in real open source project.
Thanks for pointing this out
Thanks I thought I would get an opportunity to merge the code :(( Is it good to raise a pull request together when we raise any issue, and we know the fix of that issue?

<del> reactjs.org </del>  No newline at end of file <ins> react.dev </ins>


Question:
[ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) [X] babel-plugin-react-compiler (build issue installing or using the Babel plugin) [ ] eslint-plugin-react-compiler (build issue installing or using the eslint plugin) [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) In the above code, doubleValue uses get syntax, and after compilation, it loses the keyword and becomes an ordinary function. In this case the compiler should skip compilation until this syntax is supported. I know that some syntaxes are currently unsupported by the react compiler, can we know what syntaxes are currently unsupported and in process? Every time 0-rc--
Thanks for posting, this is a bug. We have not support for get/set syntax but looks like we missed a todo for this.
Let’s close when the associated PR lands
Oops my bad, I didn't read

place, }); } else if (propertyPath.isObjectMethod()) { <ins> if (propertyPath.node.kind !== "method") { builder.errors.push({ reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.node.kind} functions in ObjectExpression`, severity: ErrorSeverity.Todo, loc: propertyPath.node.loc ?? null, suggestions: null, }); continue; } </ins> const method = lowerObjectMethod(builder, propertyPath); const place = lowerValueToTemporary(builder, method); const loweredKey = lowerObjectPropertyKey(builder, propertyPath);

<ins> ## Input ```javascript function Component({ value }) { const object = { get value() { return value; }, }; return <div>{object.value}</div>; } export const FIXTURE_ENTRYPOINT = { fn: foo, params: [{ value: 0 }], sequentialRenders: [{ value: 1 }, { value: 2 }], }; ``` ## Error ``` 1 | function Component({ value }) { 2 |   const object = { > 3 |     get value() { |     ^^^^^^^^^^^^^ > 4 |       return value; | ^^^^^^^^^^^^^^^^^^^ > 5 |     }, | ^^^^^^ Todo: (BuildHIR::lowerExpression) Handle get functions in ObjectExpression (3:5) 6 |   }; 7 |   return <div>{object.value}</div>; 8 | } ``` </ins>  No newline at end of file

<ins> function Component({ value }) { const object = { get value() { return value; }, }; return <div>{object.value}</div>; } export const FIXTURE_ENTRYPOINT = { fn: foo, params: [{ value: 0 }], sequentialRenders: [{ value: 1 }, { value: 2 }], }; </ins>

<ins> ## Input ```javascript function Component(props) { let value; const object = { set value(v) { value = v; }, }; object.value = props.value; return <div>{value}</div>; } export const FIXTURE_ENTRYPOINT = { fn: foo, params: [{ value: 0 }], sequentialRenders: [{ value: 1 }, { value: 2 }], }; ``` ## Error ``` 2 |   let value; 3 |   const object = { > 4 |     set value(v) { |     ^^^^^^^^^^^^^^ > 5 |       value = v; | ^^^^^^^^^^^^^^^^ > 6 |     }, | ^^^^^^ Todo: (BuildHIR::lowerExpression) Handle set functions in ObjectExpression (4:6) 7 |   }; 8 |   object.value = props.value; 9 |   return <div>{value}</div>; ``` </ins>  No newline at end of file

<ins> function Component(props) { let value; const object = { set value(v) { value = v; }, }; object.value = props.value; return <div>{value}</div>; } export const FIXTURE_ENTRYPOINT = { fn: foo, params: [{ value: 0 }], sequentialRenders: [{ value: 1 }, { value: 2 }], }; </ins>


Question: <!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. --React version: 18.x.x up to latest Node version: 16.x.x up to latest the React repository. : either: - Link to code example: Relevant code: (line 72) Relevant function: The current behavior: When running the commands or , a is thrown: . This is evident in the provided screenshot. The error originates from the function in . The problem stems from how the value is handled. In these specific commands, is passed as an array (e.g., ), but the code incorrectly wraps it in another array: The function then attempts to apply the method to each element of , expecting them to be strings. However, due to the erroneous wrapping, it encounters an array instead, leading to the TypeError. The expected behavior: The or commands should run without errors. The value should be handled correctly even when passed as an array, and bundle type filtering should work as expected. Additional information: The or commands work without issues because the value is passed as a string or undefined. The function generates and arrays based on the provided names ( or ). These arrays are used for bundle filtering in the function.

return result; } <ins> const argvType = Array.isArray(argv.type) ? argv.type : [argv.type]; </ins> const requestedBundleTypes = argv.type <del> ? parseRequestedNames([argv.type], 'uppercase') </del> <ins> ? parseRequestedNames(argvType, 'uppercase') </ins> : []; const requestedBundleNames = parseRequestedNames(argv._, 'lowercase'); const forcePrettyOutput = argv.pretty; const isWatchMode = argv.watch;

return true; } if (requestedBundleTypes.length > 0) { <del> const isAskingForDifferentType = requestedBundleTypes.every( requestedType => bundleType.indexOf(requestedType) === -1 </del> <ins> const isAskingForDifferentType = requestedBundleTypes.some( requestedType => !bundleType.includes(requestedType) </ins> ); if (isAskingForDifferentType) { return true;


Question: React version: 18.x.x up to latest the React repository. : either: - the output of the function logs within the script. Relevant code: Relevant function: The function, responsible for determining whether to include a bundle in the build output, contains incorrect logic for filtering when multiple bundle types are specified. Specifically, the following line causes the issue: This code uses with to check if all requested bundle types are missing in the current bundle type. However, when multiple types are specified, it should skip a bundle only if none of the requested types are present. Here's an example of the incorrect behavior observed during debugging: In this case, even though the is and doesn't include , is incorrectly evaluated as , leading to the bundle not being skipped. The function should correctly filter bundles based on multiple requested types. In the example above, the expected behavior is that should be for the bundle type, as it does not include the type. In general, the function should return (skip the bundle) only if none of the requested types are included in the current bundle type.

return result; } <ins> const argvType = Array.isArray(argv.type) ? argv.type : [argv.type]; </ins> const requestedBundleTypes = argv.type <del> ? parseRequestedNames([argv.type], 'uppercase') </del> <ins> ? parseRequestedNames(argvType, 'uppercase') </ins> : []; const requestedBundleNames = parseRequestedNames(argv._, 'lowercase'); const forcePrettyOutput = argv.pretty; const isWatchMode = argv.watch;

return true; } if (requestedBundleTypes.length > 0) { <del> const isAskingForDifferentType = requestedBundleTypes.every( requestedType => bundleType.indexOf(requestedType) === -1 </del> <ins> const isAskingForDifferentType = requestedBundleTypes.some( requestedType => !bundleType.includes(requestedType) </ins> ); if (isAskingForDifferentType) { return true;


Question:
development website Uncaught Error: getCommitTree(): Invalid commit "1" for root "1". There are only "1" commits. Every time react-devtools-extensions 1- getCommitTree(): Invalid commit "2" for root "1". There are only "1" commits.
Hi thank you for reporting. should fix this. It's scheduled to be included in DevTools 6.0.0. Let us know if it's still happening in 6.0.0

}; onProfilingStatus: (isProfiling: boolean) => void = isProfiling => { <ins> if (this._isProfiling === isProfiling) { return; } </ins> if (isProfiling) { this._dataBackends.splice(0); this._dataFrontend = null;

}); } <del> if (this._isProfiling !== isProfiling) { this._isProfiling = isProfiling; </del> <ins> this._isProfiling = isProfiling; </ins> <del> // Invalidate suspense cache if profiling data is being (re-)recorded. // Note that we clear again, in case any views read from the cache while profiling. // (That would have resolved a now-stale value without any profiling data.) this._cache.invalidate(); </del> <ins> // Invalidate suspense cache if profiling data is being (re-)recorded. // Note that we clear again, in case any views read from the cache while profiling. // (That would have resolved a now-stale value without any profiling data.) this._cache.invalidate(); </ins> <del> this.emit('isProfiling'); </del> <ins> this.emit('isProfiling'); </ins> <del> // If we've just finished a profiling session, we need to fetch data stored in each renderer interface // and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI. // During this time, DevTools UI should probably not be interactive. if (!isProfiling) { this._dataBackends.splice(0); this._rendererQueue.clear(); </del> <ins> // If we've just finished a profiling session, we need to fetch data stored in each renderer interface // and re-assemble it on the front-end into a format (ProfilingDataFrontend) that can power the Profiler UI. // During this time, DevTools UI should probably not be interactive. if (!isProfiling) { this._dataBackends.splice(0); this._rendererQueue.clear(); </ins> <del> // Only request data from renderers that actually logged it. // This avoids unnecessary bridge requests and also avoids edge case mixed renderer bugs. // (e.g. when v15 and v16 are both present) this._rendererIDsThatReportedProfilingData.forEach(rendererID => { if (!this._rendererQueue.has(rendererID)) { this._rendererQueue.add(rendererID); </del> <ins> // Only request data from renderers that actually logged it. // This avoids unnecessary bridge requests and also avoids edge case mixed renderer bugs. // (e.g. when v15 and v16 are both present) this._rendererIDsThatReportedProfilingData.forEach(rendererID => { if (!this._rendererQueue.has(rendererID)) { this._rendererQueue.add(rendererID); </ins> <del> this._bridge.send('getProfilingData', {rendererID}); } }); </del> <ins> this._bridge.send('getProfilingData', {rendererID}); } }); </ins> <del> this.emit('isProcessingData'); } </del> <ins> this.emit('isProcessingData'); </ins> } }; }


Question:
development website Uncaught Error: getCommitTree(): Invalid commit "1" for root "1". There are only "1" commits. Every time react-devtools-extensions 1- getCommitTree(): Invalid commit "2" for root "1". There are only "1" commits.
Hi thank you for reporting. should fix this. It's scheduled to be included in DevTools 6.0.0. Let us know if it's still happening in 6.0.0

{ "name": "react-devtools-core", <del> "version": "5.3.1", </del> <ins> "version": "6.0.0", </ins> "description": "Use react-devtools outside of the browser", "license": "MIT", "main": "./dist/backend.js",

"manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Chrome Developer Tools.", <del> "version": "5.3.1", "version_name": "5.3.1", </del> <ins> "version": "6.0.0", "version_name": "6.0.0", </ins> "minimum_chrome_version": "102", "icons": { "16": "icons/16-production.png",

"manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.", <del> "version": "5.3.1", "version_name": "5.3.1", </del> <ins> "version": "6.0.0", "version_name": "6.0.0", </ins> "minimum_chrome_version": "102", "icons": { "16": "icons/16-production.png",

"manifest_version": 3, "name": "React Developer Tools", "description": "Adds React debugging tools to the Firefox Developer Tools.", <del> "version": "5.3.1", </del> <ins> "version": "6.0.0", </ins> "browser_specific_settings": { "gecko": { "id": "@react-devtools",

{ "name": "react-devtools-inline", <del> "version": "5.3.1", </del> <ins> "version": "6.0.0", </ins> "description": "Embed react-devtools within a website", "license": "MIT", "main": "./dist/backend.js",

{ "private": true, "name": "react-devtools-timeline", <del> "version": "5.3.1", </del> <ins> "version": "6.0.0", </ins> "license": "MIT", "dependencies": { "@elg/speedscope": "1.9.0-a6f84db",

--- <ins> ### 6.0.0 September 25, 2024 #### Features * Support Server Components in Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30684](https://github.com/facebook/react/pull/30684)) * feat: expose installHook with settings argument from react-devtools-core/backend ([hoxyq](https://github.com/hoxyq) in [#30987](https://github.com/facebook/react/pull/30987)) * Add Filtering of Environment Names ([sebmarkbage](https://github.com/sebmarkbage) in [#30850](https://github.com/facebook/react/pull/30850)) * Support secondary environment name when it changes ([sebmarkbage](https://github.com/sebmarkbage) in [#30842](https://github.com/facebook/react/pull/30842)) * Filter Server Components ([sebmarkbage](https://github.com/sebmarkbage) in [#30839](https://github.com/facebook/react/pull/30839)) * Make function inspection instant ([sebmarkbage](https://github.com/sebmarkbage) in [#30786](https://github.com/facebook/react/pull/30786)) * Make Functions Clickable to Jump to Definition ([sebmarkbage](https://github.com/sebmarkbage) in [#30769](https://github.com/facebook/react/pull/30769)) * [Flight/DevTools] Pass the Server Component's "key" as Part of the ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30703](https://github.com/facebook/react/pull/30703)) * Make Element Inspection Feel Snappy ([sebmarkbage](https://github.com/sebmarkbage) in [#30555](https://github.com/facebook/react/pull/30555)) * Print component stacks as error objects to get source mapping ([sebmarkbage](https://github.com/sebmarkbage) in [#30289](https://github.com/facebook/react/pull/30289)) #### Bugfixes * Fix: profiling crashes #30661 #28838 ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31024](https://github.com/facebook/react/pull/31024)) * chore: remove settings manager from react-devtools-core ([hoxyq](https://github.com/hoxyq) in [#30986](https://github.com/facebook/react/pull/30986)) * fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup ([hoxyq](https://github.com/hoxyq) in [#30825](https://github.com/facebook/react/pull/30825)) * fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered ([hoxyq](https://github.com/hoxyq) in [#30676](https://github.com/facebook/react/pull/30676)) * fix: path handling in react devtools ([Jack-Works](https://github.com/Jack-Works) in [#29199](https://github.com/facebook/react/pull/29199)) #### Other * feat: display message if user ended up opening hook script ([hoxyq](https://github.com/hoxyq) in [#31000](https://github.com/facebook/react/pull/31000)) * refactor[react-devtools]: move console patching to global hook ([hoxyq](https://github.com/hoxyq) in [#30596](https://github.com/facebook/react/pull/30596)) * refactor[react-devtools]: initialize renderer interface early ([hoxyq](https://github.com/hoxyq) in [#30946](https://github.com/facebook/react/pull/30946)) * Use Unicode Atom Symbol instead of Atom Emoji ([sebmarkbage](https://github.com/sebmarkbage) in [#30832](https://github.com/facebook/react/pull/30832)) * feat[react-devtools]: support Manifest v3 for Firefox extension ([hoxyq](https://github.com/hoxyq) in [#30824](https://github.com/facebook/react/pull/30824)) * Enable pointEvents while scrolling ([sebmarkbage](https://github.com/sebmarkbage) in [#30560](https://github.com/facebook/react/pull/30560)) --- </ins> ### 5.3.1 July 3, 2024

{ "name": "react-devtools", <del> "version": "5.3.1", </del> <ins> "version": "6.0.0", </ins> "description": "Use react-devtools outside of the browser", "license": "MIT", "repository": {


Question:
does not currently support the latest version on , React version: 18.3.1 a new react application @ @ to install @ Link to code example: <!-- Please provide a CodeSandbox (), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: --cannot install due to only having version 8 as a peer dependancy. npm i output: ES lint is upgraded successfully
Seems like the changes have been to but a new version is yet to be released on NPM
You can install the eslint-plugin-react-hooks RC to get around this for now.
That doesn't work for me unfortunately. Any idea?
your issue is with eslint-plugin-import. I don’t use it personally, but you could try see if they have an rc/beta/preview branch with eslint 9 support.
you can also use as it has a similar feature of import ordering to eslint-plugin-import, and supports eslint v9
thanks whilst using the release candidate as work around does indeed fix the issue (and may be useful for other projects), RCs seem to be updated daily. I'm mainly worried about platform stability and ideally require a stable release version for our application.
I believe this related to
Fixed in Will be released alongside React 19 as stable. You can use it today by install .

## Khan Academy Question Editor  It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Ben wrote about his experience using React on Quora:   It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for his contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Ben wrote about his experience using React:  > I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React. > > The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:  >
[![](/react/img/blog/khan-academy-editor.png)](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Ben-Alpert)
   >
[![](/react/img/blog/khan-academy-editor.png)](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
  >  > [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Ben-Alpert)   > [Read the full post...](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html)  ## Pimp my Backbone.View (by replacing it with React)