"Should not already be working" in Firefox after a breakpoint/alert

[gzzo]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I'm seeing "Error: Should not already be working" after upgrading to React 16.11

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This is exclusively happening on an older version of Chrome, 68.0.3440 on Windows 7

I was unable to reproduce this in a VM environment but our Sentry is getting littered with these errors.

I know it's a long shot, but I wasn't able to find any information about this error anywhere, just a reference in the error codes file in react, so thought it would be a good idea to report this just in case. Curious if anyone has seen this.

[aweary]

Is there any way you can provide a code sample that reproduces the problem? That error should only occur if there's a bug in React, so it'd be very helpful if we could reproduce.

[CoryDanielson]

I see the same error message in sentry, and the breadcrumbs show an "out of memory" error - and then further down some react errors.

Not sure if it'll be useful, but here's some the breadcrumbs.

OS: Windows 7,
Browser: Firefox 70.0
React: 16.9.0

out of memory
out of memory
08:21:52
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:21:52
sentry
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:21:52
xhr
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:21:52
sentry
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:21:53
xhr
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:21:57
xhr
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:22:22
fetch
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:23:25
xhr
Error: Minified React error #327; visit https://reactjs.org/docs/error-decoder.html?invariant=327 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. 
08:23:30
xhr
08:24:39
exception
Error: Should not already be working.

[gzzo]

To add some more data points:

I'm not seeing out of memory errors on my end.

We downgraded to React 16.10.2 and are still seeing errors. Will keep downgrading and report back.

Also to the FB team, we're happy to share Sentry reports with you.

[CoryDanielson]

I just updated my comment to include the React version (v16.9.0)

---

Edit: Also I searched outside of the last 24h and we've received this error many times.

Browser: Firefox 70.0 & 68.0
OS: Windows 10

Browser: Firefox 70.0
OS: Mac OS X 10.14

Browser: IE 11
OS: Windows 10

[mohsinulhaq]

I am getting the exact same sentry reports, but unable to reproduce the same in VM environment.

[jhou]

We're seeing this in Sentry, too.

OS: Windows 10
Browser: Edge 18.18362
React 16.11.0 (from yarn.lock)

AFAICT it happens before the user did anything; here's the stack trace:

  at Lj(../node_modules/react-dom/cjs/react-dom.production.min.js:5382:1)
  at Anonymous function(../node_modules/react-dom/cjs/react-dom.production.min.js:2829:1)
  at t.unstable_runWithPriority(../node_modules/scheduler/cjs/scheduler.production.min.js:266:1)
  at fg(../node_modules/react-dom/cjs/react-dom.production.min.js:2794:1)
  at ig(../node_modules/react-dom/cjs/react-dom.production.min.js:2824:1)
  at Y(../node_modules/scheduler/cjs/scheduler.production.min.js:203:1)
  at A.port1.onmessage(../node_modules/scheduler/cjs/scheduler.production.min.js:94:1)```

[shriniketsarkar]

@gzzo Are you by any chance in any of your componentDidMount functions attempting to update the state as the first thing to do in that function?

I was getting the error Should not already be working when I had the following line in my componentDidMount function :
this.setState({ hasLaunched: true });

[gzzo]

Interesting. We do call setState in a couple of componentDidMount. The React docs specify this is okay though:

You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the constructor() instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

[rfboykin]

Hello,

We've also noticed this error in our sentry. It's only occurred once so far under these conditions:

OS: Windows 10
Browser: IE 11
React: 16.11.0

The stack trace does not appear to provide much additional info:

Error: Should not already be working.
  at Lj(webpack://[name]/./node_modules/react-dom/cjs/react-dom.production.min.js:223:104)
  at Anonymous function(webpack://[name]/./node_modules/react-dom/cjs/react-dom.production.min.js:121:110)
  at t.unstable_runWithPriority(webpack://[name]/./node_modules/scheduler/cjs/scheduler.production.min.js:18:431)
  at fg(webpack://[name]/./node_modules/react-dom/cjs/react-dom.production.min.js:120:318)
  at ig(webpack://[name]/./node_modules/react-dom/cjs/react-dom.production.min.js:121:61)
  at Y(webpack://[name]/./node_modules/scheduler/cjs/scheduler.production.min.js:17:178)
  at S.port1.onmessage(webpack://[name]/./node_modules/scheduler/cjs/scheduler.production.min.js:14:64)

[davineyard]

I had this same issue. Was not a problem in Chrome however I received a blank screen and the error. Error: Should not already be working.
React 16.12.0
I had two(2) this.setState calls in conditional if statements in componentDidMount. This should have been ok however I removed them and figured a way to set them a little later and the error stopped. this.setState should have been ok to run in componentDidMount so I hope this gets resolved.

[magnetnation]

We also experience this issue.
React 16.12.0
OS: IOS 13.3
Browser: Safari

We have tons of cases were we call one or multiple 'setState' in 'componentDidMount'. It has never been an issue. Moving these calls to other places is not an option.

[xUSERxNAMEx]

I am able to reproduce the issue when stepping through a function after a breakpoint in an otherwise working development build application.

Console output:
Error: Should not already be working. react-dom.development.js:24247
performSyncWorkOnRoot React
performSyncWorkOnRoot self-hosted:920
flushSyncCallbackQueueImpl React
unstable_runWithPriority scheduler.development.js:697
React 2
runWithPriority$2
flushSyncCallbackQueueImpl
workLoop scheduler.development.js:641
flushWork scheduler.development.js:596
performWorkUntilDeadline scheduler.development.js:203
enter event-loop.js:79
enter self-hosted:874
_pushThreadPause thread.js:256
_pauseAndRespond thread.js:851
pauseAndRespond thread.js:1049
_makeOnStep thread.js:978
authCheckState auth.js:100
createThunkMiddleware Redux
dispatch (index):1
onTryAutoSignIn App.js:42
componentDidMount App.js:17
React 6
commitLifeCycles
commitLayoutEffects
callCallback
invokeGuardedCallbackDev
invokeGuardedCallback
commitRootImpl
commitRootImpl self-hosted:975
unstable_runWithPriority scheduler.development.js:697
React 10
runWithPriority$2
commitRoot
finishSyncRender
performSyncWorkOnRoot
scheduleUpdateOnFiber
updateContainer
legacyRenderSubtreeIntoContainer
unbatchedUpdates
legacyRenderSubtreeIntoContainer
render
js index.js:51
Webpack 7
webpack_require
fn
1
webpack_require
checkDeferredModules
webpackJsonpCallback

[alexandcote]

We also experience this issue since we bumped React.

React 16.12.0
Browser: Firefox 72/73/74
OS: Window 10, Mac OS 10.0/10.10/10.14

The stack traces point us to this function call

More detail

InvalidStateError
An attempt was made to use an object that is not, or is no longer, usable

[rralbritton]

Any movement on this? I am also getting these errors in FireFox (73.0.1 (64-bit) but not in Chrome (Version 80.0.3987.122 (Official Build) (32-bit)
React - 16.12
React-Redux 7.1.3

It is happening when trying to initialize data from props:

//Parent Page
<SimpleForm sampleData = {sampleData} />

//SimpleForm.js
 componentDidMount (){
 if (this.props.sampleData) {
      this.props.initialize(this.props.sampleData);
}

Error:

performSyncWorkOnRoot React
    performSyncWorkOnRoot self-hosted:920
    flushSyncCallbackQueueImpl React
    unstable_runWithPriority scheduler.development.js:701
    React 2
        runWithPriority$2
        flushSyncCallbackQueueImpl
    workLoop scheduler.development.js:645
    flushWork scheduler.development.js:600
    performWorkUntilDeadline scheduler.development.js:197
    enter event-loop.js:79
    enter self-hosted:874
    _pushThreadPause thread.js:256
    _pauseAndRespond thread.js:851
    hit breakpoint.js:235
    componentDidMount Redux
    React 6
        commitLifeCycles
        commitLayoutEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        commitRootImpl
    commitRootImpl self-hosted:975
    unstable_runWithPriority scheduler.development.js:701
    React 10
        runWithPriority$2
        commitRoot
        finishSyncRender
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:10
    Webpack 7
        __webpack_require__
        fn
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>