jiebi/CodeConvo huggingface dataset:
Change:
React version: 17.0.2 React-refresh version: 0.10.0 This issue is similar to , but ignores default exported unnamed functions instead. As a code comment suggests, this is a known limitation: Would a fix be considered? Given the following files, making changes to doesn't trigger a re-render. module: module: Making changes to does not re-render the element in . The transformed module does not register the for refresh. Making changes to does re-render the element in .
This is intentional — even if we fix this case, we need some heuristic for other tools like lint rules. Why are you using this style? Functions should have names so that you get them in stack traces and so on.
Indeed, but then it becomes confusing: If there's no way around, this can be closed and I'll make a suggestion downstream to use The code comment mentioned above should then also be more explicit, replacing "currently" by "intentionally".
However, given that an ignored component prevents a refresh (), I haven't figured out yet whether this is an issue with itself or with . AFAIK, a code update of an ignored component should still trigger a refresh.
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:
Published has the following piece of code in : :roll_eyes:
FYI
Huh. That's no good.
This is because I accidentally put the module map in an map rather than a map. Oops.
Fix published in 4.11.1
Thanks!

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

react: 'react', // TODO: Once this package is published, remove the external // 'react-debug-tools': 'react-debug-tools', <del> 'react-devtools-feature-flags': resolveFeatureFlags('inline'), </del> 'react-dom': 'react-dom', 'react-is': 'react-is', scheduler: 'scheduler', }, <ins> resolve: { alias: { 'react-devtools-feature-flags': resolveFeatureFlags('inline'), }, }, </ins> optimization: { minimize: false, },

<!-- Upcoming changes go here --> </details> <ins> ## 4.11.1 (April 11, 2021) #### Bugfix * Fixed broken import in `react-devtools-inline` for feature flags file ([bvaughn](https://github.com/bvaughn) in [#21235](https://github.com/facebook/react/issues/21235)) </ins> ## 4.11.0 (April 9, 2021) #### Bugfix * `$r` should contain hooks property when it is `forwardRef` or `memo` component  ([meowtec](https://github.com/meowtec) in [#20626](https://github.com/facebook/react/pull/20626))
Change:
This is a followup issue for pmndrs/react-three-fiber From my understanding of , the DevTools parse the version number advertised by the renderer in to select how to parse the internal fiber object. Unfortunately this means that third-party renderers that advertise a version lower than the equivalent React version for the release they are using get misclassified: for instance is using which is equivalent to , and since major version is much lower than it uses the default values for the enum which in turns lead to getting identified as and hook inspection being unavailable. A short term solution for renderers is to advertise a React-compatible version number, but ideally this is an implementation detail of the devtools that users of should not have to be aware of (also this means the version number displayed in the devtools is wrong). I'm not sure I'm familiar enough with the internals of the devtools to open a PR for this, but since the version parsing logic is used to detect features that are internal to anyway I guess a solution would be to have the Reconciler package add its own value for the constant along with the parameters sent to the devtools backend, and have the devtools use this string if its available over the renderer version.
Once and land (and get released) newer versions of the reconciler will inject its own version (to be used instead of the renderer version). Unfortunately this won't help you until you upgrade.

Discussion:
findHostInstancesForRefresh, } from './ReactFiberHotReloading.new'; import {markRenderScheduled} from './SchedulingProfiler'; <ins> import ReactVersion from 'shared/ReactVersion'; </ins> export {registerMutableSourceForHydration} from './ReactMutableSource.new'; export {createPortal} from './ReactPortal'; export {

findHostInstancesForRefresh, } from './ReactFiberHotReloading.old'; import {markRenderScheduled} from './SchedulingProfiler'; <ins> import ReactVersion from 'shared/ReactVersion'; </ins> export {registerMutableSourceForHydration} from './ReactMutableSource.old'; export {createPortal} from './ReactPortal'; export {

setRefreshHandler: __DEV__ ? setRefreshHandler : null, // Enables DevTools to append owner stacks to error messages in DEV mode. getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null, <ins> // Enables DevTools to detect reconciler version rather than renderer version // which may not match for third party renderers. reconcilerVersion: ReactVersion, </ins> }); }
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: DevTools version 4.12.2- from within a React component where the last argument is typeof <!-- 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 bug only happens when you make a change, so if you use the code sandbox link you need, open a new window, active dev tools, open the React dev tools and then uncomment line 5: only then will the error actually happen. I've located the culprit to this line of code And would offer the following change <!-- 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: --React DevTools is implicitly converting a Symbol to a string. React DevTools does not implicitly try to convert a Symbol to a string.
Thanks for the report. Also reproduced with DevTools version 4.12.3- in Chrome 90 In addition to fixing the bug, it would also be nice to guard against devtools failing so that the UI is unaffected if devtools is faulty. /cc
Your the best, thanks for a quick turn around!

Discussion:
'n    in Child (at **)n    in Intermediate (at **)n    in Parent (at **)', ); }); <ins> it('should correctly log Symbols', () => { const Component = ({children}) => { fakeConsole.warn('Symbol:', Symbol('')); return null; }; act(() => ReactDOM.render(<Component />, document.createElement('div'))); expect(mockWarn).toHaveBeenCalledTimes(1); expect(mockWarn.mock.calls[0][0]).toBe('Symbol:'); }); </ins> });

if (consoleSettingsRef.appendComponentStack) { const lastArg = args.length > 0 ? args[args.length - 1] : null; const alreadyHasComponentStack = <del> lastArg !== null && isStringComponentStack(lastArg); </del> <ins> typeof lastArg === 'string' && isStringComponentStack(lastArg); </ins> // If we are ever called with a string that already has a component stack, // e.g. a React error/warning, don't append a second stack.

return [<div />]; } <ins> function ComponentWithSymbolWarning() { console.warn('this is a symbol', Symbol('foo')); console.error('this is a symbol', Symbol.for('bar')); return null; } </ins> export default function ErrorsAndWarnings() { const [count, setCount] = useState(0); const handleClick = () => setCount(count + 1);

<ReallyLongErrorMessageThatWillCauseTextToBeTruncated /> <DuplicateWarningsAndErrors /> <MultipleWarningsAndErrors /> <ins> <ComponentWithSymbolWarning /> </ins> </Fragment> ); }
Change:
A very small thing, would it be better to change the to in the error log since we separated the original logic into two functions (, )? Although it wouldn't be an issue for the authors, it feels like it would be better to sync it with the function name? Would you mind renaming it in the next 'typo fixing'?
Thanks!

Discussion:
if (__DEV__) { if (typeof (type: any).tag === 'number') { console.error( <del> 'Received an unexpected object in getComponentName(). ' + </del> <ins> 'Received an unexpected object in getComponentNameFromType(). ' + </ins> 'This is likely a bug in React. Please file an issue.', ); }
Change:
Website is actually irrelevant, but required. the devtools the settings button. the layout being broken (causing horizontal scrollbar). Screenshot ! Every time No response No response No response No response No response No response
Can you provide some more information? Browser (and version), operating system (and version), DevTools extension version, etc. I can't reproduce this.
Firefox 89, Windows 10, latest extension. It's really not that far-fetched.
I'm not sure why there's hostility in your responses (both to this issue and ). This is a free software product and I'm trying to help you. Providing basic info like browser and operating system version along with a bug report is generally useful, regardless of how far fetched you think the configuration is :smile:
Not sure if this is confirmed by anyone else, but I can reproduce this on Firefox. I'll paste my device information so you can try that out in order to repro. How it looks: ! Machine: Windows 10 Home Browser: Firefox version 89.0.1 (64-bit) Let me know if you need more details, I'll be more than happy to take this up. Update: It also happens on chrome dev tools when you resize your dev tools to some specific width.
If I enable scroll bars on OS X, I can also reproduce this in Firefox. Should be able to fix it then. (Did not have access to a Windows machine to test with.) Edit 1: It looks like this is caused by the tab bar containing too many tabs now (General, Debugging, Components, Profiler, and "x" button). Should be an easy fix. Edit 2: I think the reason for the difference between Firefox and Chrome is that the (supposedly hidden) buttons used for the Tab bar accessibility isn't 0 width for Firefox.
Sorry mate, but I don't understand the question then. You asked for browser & OS, and I gave that exact answer. That's really, honestly, genuinely, everything needed to a repro. I've seen this on every pc running Windows 10 + Firefox so far, which is why it's not that far-fetched. I don't see how that's hostile. And actually, we're trying help each other, aren't we Also how am I responding hostile in ? I'm suggesting a fix. I'm Dutch, so I'm just being direct, not hostile at all. It's my culture, please respect that

Discussion:
box-shadow: 0 2px 4px var(--color-shadow); border-radius: 0.25rem; overflow: auto; <del> width: 400px; </del> <ins> width: 410px; </ins> max-width: 100%; }

user-select: none; color: var(--color-text); <ins> /* Hide radio buttons for Firefox too */ position:  relative; </ins> /* Electron drag area */ -webkit-app-region: no-drag; }

width: 0; margin: 0; opacity: 0; <ins> /* Hide radio buttons for Firefox too */ position:  absolute; </ins> } .IconSizeNavigation,
Change:
DevTools tells Babel to parse the source code using "jsx" and "typescript" plug-ins: This will work for some simple usages of Flow, but syntax may diverge and cause the parsing to fail. Let's scan the source code for a pragma and pass "flow" instead of "typescript" if one is found. We should also add tests for both Flow and TypeScript to the test component pool:
I think something as basic as this should work:

Discussion:
hookSourceData.originalSourceAST = sourceMetadata.originalSourceAST; hookSourceData.originalSourceCode = sourceMetadata.originalSourceCode; } else { <ins> // TypeScript is the most commonly used typed JS variant so let's default to it // unless we detect explicit Flow usage via the "@flow" pragma. const plugin = originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript'; </ins> // TODO (named hooks) Parsing should ideally be done off of the main thread. const originalSourceAST = parse(originalSourceCode, { sourceType: 'unambiguous', <del> plugins: ['jsx', 'typescript'], </del> <ins> plugins: ['jsx', plugin], </ins> }); hookSourceData.originalSourceAST = originalSourceAST; if (__DEBUG__) {
Change:
This can cause long file names (URLs) to be truncated which in turn will break named hooks code (since it needs to load those file names).

Discussion:
import type {SourceConsumer} from './astUtils'; const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^s'"]+)/gm; <del> const ABSOLUTE_URL_REGEX = /^https?:///i; </del> const MAX_SOURCE_LENGTH = 100_000_000; type AST = mixed;

} let url = sourceMappingURLs[i].split('=')[1]; <del> if (ABSOLUTE_URL_REGEX.test(url)) { const baseURL = url.slice(0, url.lastIndexOf('/')); url = `${baseURL}/${url}`; if (!isValidUrl(url)) { throw new Error(`Invalid source map URL "${url}"`); } } else if (!url.startsWith('/')) { </del> <ins> if (!url.startsWith('http') && !url.startsWith('/')) { </ins> // Resolve paths relative to the location of the file name const lastSlashIdx = runtimeSourceURL.lastIndexOf('/'); if (lastSlashIdx !== -1) {

return map; } <del> function isValidUrl(possibleURL: string): boolean { try { // eslint-disable-next-line no-new new URL(possibleURL); } catch (_) { return false; } return true; } </del> function loadSourceFiles( locationKeyToHookSourceData: Map<string, HookSourceData>, ): Promise<*> {

// Never dehydrate the "hooks" object at the top levels. return true; } <ins> if ( path[path.length - 2] === 'hookSource' && path[path.length - 1] === 'fileName' ) { // It's important to preserve the full file name (URL) for hook sources // in case the user has enabled the named hooks feature. // Otherwise the frontend may end up with a partial URL which it can't load. return true; } </ins> if ( path[path.length - 1] === 'subHooks' || path[path.length - 2] === 'subHooks'

}; case 'string': <del> return data.length <= 500 ? data : data.slice(0, 500) + '...'; </del> <ins> isPathAllowedCheck = isPathAllowed(path); if (isPathAllowedCheck) { return data; } else { return data.length <= 500 ? data : data.slice(0, 500) + '...'; } </ins> case 'bigint': cleaned.push(path);
Change:
The named hooks cache returns The first (mixed array of string and null) indicates an overall success, even if some names couldn't be inferred. The second indicates an error (e.g. couldn't locate or load source map). In the event of the 2nd response type, the UI currently does nothing (falls back to default) but we should show an error badge (maybe a disabled but red icon with a tooltip saying there was an error) since it's a confusing user experience to just do nothing.

Discussion:
inspectElement, } from 'react-devtools-shared/src/inspectedElementCache'; import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache'; <del> import {ElementTypeFunction} from 'react-devtools-shared/src/types'; </del> import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext'; import {SettingsContext} from '../Settings/SettingsContext';

if (parseHookNames) { if ( inspectedElement !== null && <del> inspectedElement.type === ElementTypeFunction && </del> inspectedElement.hooks !== null && loadHookNamesFunction !== null ) {

.HookName { color: var(--color-component-name); <ins> } .ToggleError { color: var(--color-error-text); </ins> }  No newline at end of file

toggleParseHookNames(); }; <ins> const hookParsingFailed = parseHookNames && hookNames === null; let toggleTitle; if (hookParsingFailed) { toggleTitle = 'Hook parsing failed'; } else if (parseHookNames) { toggleTitle = 'Parsing hook names ...'; } else { toggleTitle = 'Parse hook names (may be slow)'; } </ins> const handleCopy = () => copy(serializeHooksForCopy(hooks)); if (hooks === null) {

<div className={styles.HooksTreeView}> <div className={styles.HeaderRow}> <div className={styles.Header}>hooks</div> <del> {enableHookNameParsing && !parseHookNames && ( </del> <ins> {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && ( </ins> <Toggle <ins> className={hookParsingFailed ? styles.ToggleError : null} </ins> isChecked={parseHookNamesOptimistic} <del> isDisabled={parseHookNamesOptimistic} </del> <ins> isDisabled={parseHookNamesOptimistic || hookParsingFailed} </ins> onChange={handleChange} <del> title={ parseHookNames ? 'Parse hook names' : 'Parse hook names (may be slow)' }> </del> <ins> title={toggleTitle}> </ins> <ButtonIcon type="parse-hook-names" /> </Toggle> )}
Change:
I encountered the same issue as but using as a stand-alone app instead of from the the browser. The bottom line is that the profiler becomes unresponsive after any interaction with a heavily loaded react page. React version: React: 17.0.2 ReactDOM: 17.0.2 React Devtools: 4.18.0 a react-devtools stand-alone () to a session profiling something on your app that would cause a huge number of updates profiler stops functioning I actually went through and found out the origin of the issue, however I am not sure what would be the best approach to fix it. It seems the the origin is a (very) big incoming message: <img width="516" alt="image" src="https://user-"That eventually causes a maximum call stack exceeded error: <img width="522" alt="image" src="https://user-"Coming from : And interestingly enough, doing spread operator with an array with elements actually causes a error I tried replacing the code above with the following replacement and it seems to work:
Can you share a repro case with me please? I'd love to verify the fix (and if possible maybe even add an automated regression test– although this might not be possible, given the underlying problem seems to be with the generated code not the source code).
That is interesting! I don't think this is true for the native spread operator. For example, this runs okay for me in Chrome: I'm pretty sure this has to do with the code that's generated in the build (for backwards compat): This throws as you describe:
Actually I think this depends on the function. Indeed your array example works as expected, but try this: For me it fails natively on chrome EDIT: I just realised you are doing a spread operator on an array. This is trivially translated into a call and the stack is not used. However if you try to use the spread operation in a function call, all the function arguments must be first placed on stack before the function is called (per standard JS function call procedure). This means that if the array is big enough, you will exhaust your stack. Unfortunately my project structure is pretty complex to identify just one possible code path that is causing that issue. My best guess is that it's happening when I am replacing (un-mounting and re-mounting) a couple of thousand of child elements at once. I can try to isolate a reproducible example it but it will take some time... If it suits you though, I can easily give you a JSON dump of the contents of the said "operations" event that caused the exception.
Nice follow up information! Thanks! Fair enough. I think we can proceed without a repro in this case.

Discussion:
} export function utfDecodeString(array: Array<number>): string { <del> return String.fromCodePoint(...array); </del> <ins> // Avoid spreading the array (e.g. String.fromCodePoint(...array)) // Functions arguments are first placed on the stack before the function is called // which throws a RangeError for large arrays. // See github.com/facebook/react/issues/22293 let string = ''; for (let i = 0; i < array.length; i++) { const char = array[i]; string += String.fromCodePoint(char); } return string; </ins> } export function utfEncodeString(string: string): Array<number> {
Change:
React DevTools v4.20.0 in Firefox in Firefox Firefox DevTools error in console ! Every time

Discussion:
declare var chrome: any; import {__DEBUG__} from 'react-devtools-shared/src/constants'; <ins> import {getBrowserName} from './utils'; </ins> import { EXTENSION_INSTALL_CHECK, EXTENSION_INSTALLATION_TYPE,

LOCAL_EXTENSION_ID, } from './constants'; <ins> const IS_CHROME = getBrowserName() === 'Chrome'; </ins> const UNRECOGNIZED_EXTENSION_ERROR = 'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' + 'Please make sure you only have a single version of the extension installed or enabled. ' +

break; } case 'unknown': { <del> // If we don't know how this extension was built, we can't reliably detect if there // are other installations of DevTools present. // In this case, assume there are no duplicate exensions and show a warning about // potential conflicts. console.error(UNRECOGNIZED_EXTENSION_ERROR); chrome.devtools.inspectedWindow.eval( `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`, ); </del> <ins> // TODO: Support duplicate extension detection in other browsers if (IS_CHROME) { // If we don't know how this extension was built, we can't reliably detect if there // are other installations of DevTools present. // In this case, assume there are no duplicate exensions and show a warning about // potential conflicts. console.error(UNRECOGNIZED_EXTENSION_ERROR); chrome.devtools.inspectedWindow.eval( `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`, ); } </ins> callback(false); break; }
Change:
a website that uses React. an element that uses Hooks. to load hook names. hook names always fails: !
Fix landed in , it should be a few days before it can be published to the Chrome Web Store, since it needs to go through the review process.

Discussion:
chrome.devtools.inspectedWindow.eval( `window.postMessage({ source: 'react-devtools-inject-backend', <del> extensionId: "${CURRENT_EXTENSION_ID}" </del> <ins> extensionId: "${CURRENT_EXTENSION_ID}", </ins> }, '*');`, function(response, evalError) { if (evalError) {

chrome.runtime.onMessage.addListener(onPortMessage); chrome.devtools.inspectedWindow.eval(` <del> window.postMessage({ source: 'react-devtools-extension', extensionId: "${CURRENT_EXTENSION_ID}" payload: { type: 'fetch-file-with-cache', url: "${url}", }, }); `); </del> <ins> window.postMessage({ source: 'react-devtools-extension', extensionId: "${CURRENT_EXTENSION_ID}", payload: { type: 'fetch-file-with-cache', url: "${url}", }, }, '*'); `); </ins> }; // Fetching files from the extension won't make use of the network cache
Change:
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.

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