React: Error: "Commit tree does not contain fiber 256. This is a bug in React DevTools."

[RickeyWard]

Describe what you were doing when the bug occurred:

1. Profiling a slow component
   In a component that rendered 5000 pre tags with single lines of text in them, that has an unrelated controlled text box is the same component that was typed into while profiling. App hung a while and, when it rendered again the error was in the profiler.

---

Please do not remove the text below this line

DevTools version: 4.6.0-6cceaeb67

Call stack: at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:162825)
at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:161628)
at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164582)
at ec (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:339280)
at ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59620)
at Ll (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:109960)
at qc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102381)
at Hc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102306)
at Vc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102171)
at Tc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:98781)

Component stack: in ec
in div
in div
in div
in So
in Unknown
in n
in Unknown
in div
in div
in rl
in Ze
in fn
in Ga
in _s

[bvaughn]

Are you able to repro this? If so, can you share a repro case with us?

[adaschevici]

@bvaughn
hi, I received a similar error while working with a very large list that is slow to render
Repo is here: https://github.com/adaschevici/goodreads-v2/tree/05-continuous-integration
FYI: it has submodules so you should clone with them

Setup:
npm run bootstrap

Run app:
npm run start:app

1) Navigate to Login
2) Start Profiling
3) Navigate to Dashboard
4) Stop profiling

When its done gathering the results it errors out.

Stacktrace i got:

DevTools version: 4.6.0-6cceaeb67

Call stack: at j (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:162825)
    at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:161628)
    at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164582)
    at ec (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:339280)
    at ci (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:59620)
    at nl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:69923)
    at Ll (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:110996)
    at qc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102381)
    at Hc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102306)
    at Vc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:102171)

Component stack: in ec
    in div
    in div
    in div
    in So
    in Unknown
    in n
    in Unknown
    in div
    in div
    in rl
    in Ze
    in fn
    in Ga
    in _s

Sorry was not able to get a more isolated test case, just came across it

Also was not able to reliably reproduce, feels like its related to garbage collection

[bvaughn]

@adaschevici Thanks for sharing repro instructions!

I'm a little confused about how to run it though. There's no bootstrap or start:app commands in the repo you linked me to. (None of the packages define scripts by that name.) Oops, I just noticed that your link specified a branch name as well.

npm run start:app fails for me though:

$ npm run start:app

> @goodreads-v2/[email protected] start:app /Users/bvaughn/Downloads/goodreads-v2
> npm-run-all --parallel start:server start:goodreads


> @goodreads-v2/[email protected] start:server /Users/bvaughn/Downloads/goodreads-v2
> lerna exec npm run server:dev --scope=jungle-jim


> @goodreads-v2/[email protected] start:goodreads /Users/bvaughn/Downloads/goodreads-v2
> lerna exec npm start --scope=@goodreads-v2/goodreads

lerna notice cli v3.21.0
lerna notice cli v3.21.0
lerna notice filter including "jungle-jim"
lerna info filter [ 'jungle-jim' ]
lerna notice filter including "@goodreads-v2/goodreads"
lerna info filter [ '@goodreads-v2/goodreads' ]
lerna ERR! EFILTER No packages remain after filtering [ 'jungle-jim' ]
lerna info Executing command in 1 package: "npm start"
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @goodreads-v2/[email protected] start:server: `lerna exec npm run server:dev --scope=jungle-jim`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @goodreads-v2/[email protected] start:server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bvaughn/.npm/_logs/2020-05-13T16_23_56_797Z-debug.log
ERROR: "start:server" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @goodreads-v2/[email protected] start:app: `npm-run-all --parallel start:server start:goodreads`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @goodreads-v2/[email protected] start:app script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bvaughn/.npm/_logs/2020-05-13T16_23_56_869Z-debug.log

Any chance you could just deploy this app somewhere I could look at it already running?

[adaschevici]

@bvaughn the error you are seeing is most likely caused by the fact that the git module for the jungle-jim is not automatically cloned.
git clone --recurse-submodules should fix that

[bvaughn]

Ah, I think my git client was not new enough to support the --recurse-submodules flag. Had to update it.

[bvaughn]

That being said, once the app started, I see another error (in the browser this time):

Failed to compile.

./src/index.js
Module not found: Can't resolve '@goodreads-v2/component-library' in '/Users/bvaughn/Downloads/goodreads-v2/packages/goodreads/src'

Again, any chance you could just deploy this app somewhere I could look at it already running? 😅

[adaschevici]

ugh. Yeah, not sure if i can deploy it it needs the mocked API and some extra config i'm not able to do fast enough.
I'll see what i can do and update. Thanks!

[bvaughn]

No problem. Keep me posted! I'm happy to try something else on the local checkout if you have additional suggestions for resolving the latest compilation error too. Getting a repro of this would be very helpful.

[adaschevici]

oh, right so you also need to run
npm run build:components
then npm run start:app
Overlooked that, my bad

[bvaughn]

Cool. Thanks @adaschevici. I can run the app locally now.

How frequently can you reproduce it? Every other time? One in ten times? (I haven't seen it yet so I'm just wondering if I'm doing something wrong.)

Also, when you see it- is it immediately after stopping profiling? Or do you click around or do anything else?

[adaschevici]

I haven't seen it since the first time i tried profiling the app.

After that i did a hard refresh with clearing cache in chrome and have not seen it since.
I profiled the page about ~20 times after that

What i did when i __did__ see it:
1) navigate to login
2) start profiling
3) go back to dashboard
4) stop profiling (took a while)

Actual: the error previously mentioned

[RickeyWard]

I was unable to reproduce it since I posted the issue.

[bvaughn]

1. stop profiling (took a while)

This sounds...unexpected. Makes me think something else was going on. Especially for such a small app, stop profiling should seem to be nearly instant.

[loia5tqd001]

Reproduction of the issue:

• First, give a peek at this video, which is reproduction steps in video based.

Reproduction steps:

1. Go to this repo.
   1.1 Clone the repo.
   1.2 Run the project with yarn and yarn start.

1. When the project is launched, do the same as the video above, which are:
   2.1 Navigate to BASE_URL/staff/merchants
   2.2 Start the profiler
   2.3 Click on the blue "Thêm mới đối tác" button
   2.4 Stop profiling
   2.5 (If the error don't appear instantly, click through the most expensive commits on the profiler window - *sometimes the error appear instantly when stop profiling, sometimes it needs we to go extra miles to see it, just playing around)*

Any requirement for extra information are welcome!

[bvaughn]

@loia5tqd001 Thank you for the repro! Can confirm it repros on my end. This is a huge help! I'll dig in this morning.

[bvaughn]

I think I've paired the repro down to this Code Sandbox

---

[bvaughn]

Unfortunately this looks like another recent regression 😦 because this bug doesn't manifest in v4.7

Still good to have a repro for, and I'm investigating a fix today. I don't think it will fix the longer standing (much less harder to find a repro for) issue.

[bvaughn]

Bisecting shows that this regression also occurred in 8f05f2b, as the result of #19108

[bvaughn]

FYI I've reduced the failure case to the following test:

it('should not crash during route transitions with Suspense', () => {
  const RouterContext = React.createContext();

  function App() {
    return (
      <Router>
        <Switch>
          <Route path="/"><Home /></Route>
          <Route path="/about"><About /></Route>
        </Switch>
      </Router>
    );
  }

  const Home = () => {
    return (
      <React.Suspense>
        <Link path="/about">Home</Link>
      </React.Suspense>
    );
  };

  const About = () => <div>About</div>;

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js
  function Router({children}) {
    const [path, setPath] = React.useState('/');
    return (
      <RouterContext.Provider value={{ path, setPath }}>
        {children}
      </RouterContext.Provider>
    );
  }

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js
  function Switch({ children }) {
    return (
      <RouterContext.Consumer>
        {context => {
          let element = null;
          React.Children.forEach(children, child => {
            if (context.path === child.props.path) {
              element = child.props.children;
            }
          });
          return element
            ? React.cloneElement(element)
            : null;
        }}
      </RouterContext.Consumer>
    );
  }

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js
  function Route({ children, path }) {
    return null;
  }

  const linkRef = React.createRef();

  // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
  function Link({ children, path }) {
    return (
      <RouterContext.Consumer>
        {context => {
          return (
            <button ref={linkRef} onClick={() => context.setPath(path)}>{children}</button>
          );
        }}
      </RouterContext.Consumer>
    );
  }

  const container = document.createElement('div');
  utils.act(() => ReactDOM.render(<App />, container));
  expect(container.textContent).toBe('Home');
  utils.act(() => Simulate.click(linkRef.current));
  expect(container.textContent).toBe('About');
});

The error being thrown is when the Link component gets unmounted from its parent Suspense component. It looks like the mount code path is incorrectly. skipping over the Link component to the Context.Consumer beneath it.

[bvaughn]

Version 4.8.2 has just been published to NPM and submitted to Chrome/Edge/Firefox stores with a fix for this issue.

Browsers sometimes take a few hours to approve a new extension version, but once the new version goes live this should be resolved. Sorry for the inconvenience.

[adaschevici]

@bvaughn
that's cool Brian, thanks for the fix