jiebi/CodeConvo huggingface dataset:
Change:
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.

Discussion:
), }; <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'
Change:
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,

Discussion:
"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" },
Change:
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.)

Discussion:
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> } }
Change:
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

Discussion:
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
Change:
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!

Discussion:
} 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.
Change:
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:

Discussion:
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;
Change:
(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.

Discussion:
<div className={styles.LeftColumn}> <div className={styles.Toolbar}> <RecordToggle disabled={!supportsProfiling} /> <del> <ReloadAndProfileButton disabled={selectedTabID === 'timeline' || !supportsProfiling} /> </del> <ins> <ReloadAndProfileButton disabled={!supportsProfiling} /> </ins> <ClearProfilingDataButton /> <ProfilingImportExportButtons /> <div className={styles.VRule} />
Change:
<!-- 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.

Discussion:
<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.
Change:
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!

Discussion:
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:
Change:
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

Discussion:
opacity: true, order: true, orphans: true, <ins> scale: true, </ins> tabSize: true, widows: true, zIndex: true,
Change:
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!

Discussion:
} `, }, <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: [ {
Change:
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.

Discussion:
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',
Change:
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.

Discussion:
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.">
Change:
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

Discussion:
/** <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.
Change:
<!-- 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:

Discussion:
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>
Change:
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?

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