Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gzzo opened this issue Nov 13, 2019 · 73 comments
Open

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

gzzo opened this issue Nov 13, 2019 · 73 comments

Comments

@gzzo
Copy link

gzzo commented Nov 13, 2019

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
Copy link
Contributor

aweary commented Nov 13, 2019

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
Copy link

CoryDanielson commented Nov 17, 2019

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
Copy link
Author

gzzo commented Nov 18, 2019

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
Copy link

CoryDanielson commented Nov 18, 2019

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
Copy link

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

@jhou
Copy link

jhou commented Nov 27, 2019

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
Copy link

@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
Copy link
Author

gzzo commented Dec 4, 2019

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
Copy link

rfboykin commented Dec 16, 2019

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)

@dvineyardUPD
Copy link

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
Copy link

magnetnation commented Jan 29, 2020

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
Copy link

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
Copy link

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
Copy link

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>

@nikhil3000
Copy link

I got the same error 'Should not already be working' because I created a pipe write stream in my dataActions, shifting the function to a util file outside the action file fixed the issue for me.

@hinok
Copy link

hinok commented Mar 26, 2020

I got the same error reported on sentry

Error: Should not already be working.
  at Lj(/node_modules/react-dom/cjs/react-dom.production.min.js:223:129)
  at b(/node_modules/react-dom/cjs/react-dom.production.min.js:121:115)
  at Lf(/node_modules/scheduler/cjs/scheduler.production.min.js:18:437)
  at fg(/node_modules/react-dom/cjs/react-dom.production.min.js:120:325)
  at ig(/node_modules/react-dom/cjs/react-dom.production.min.js:121:61)
  at X(/node_modules/scheduler/cjs/scheduler.production.min.js:17:184)
  at hf2P/S.port1.onmessage(/node_modules/scheduler/cjs/scheduler.production.min.js:14:64)
User-Agent: 
Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0

I can point to the live website where this error was reported but I cannot reproduce it manually.

@azizhk
Copy link

azizhk commented Apr 27, 2020

Getting this error in React Native as well.
react: "16.11.0"
react-native: "0.62.2"

Based on my understanding of this reddit comment.

I think if user land code throws an error in componentDidMount, React does not reset state and next time render occurs, this Error "Should not already be working" gets thrown.

@rtremblet-fr
Copy link

I has this issue and the problem was related toan ajax call with jquery made in componentDidMount with async parameter to false, this causes some issues with latest react release to synchronise the state I assume. setting async to true solved the issue

@dimaryaz
Copy link

This happens to me if I set a breakpoint in componentDidMount, either by clicking the line number in Firefox's debugger or by calling debugger in the code.

@dimaryaz
Copy link

Ok, at least in my case, this looks like a... thread-safety issue? Firefox has no problem running JavaScript event handlers while stopped at a breakpoint, causing all kinds of bizarre behavior. I must've missed the memo that JavaScript is no longer single-threaded.

@azizhk
Copy link

azizhk commented May 20, 2020

@aweary Can we add some more diagnostic info, like what component React is working on, maybe that might give us some information on where to concentrate.
Right now, we are getting multiple reports about users facing App Crashes (React Native)

@cristianoccazinsp
Copy link

Just got this error in a React Native project.
"react": "16.13.1",
"react-native": "0.61.5"

@azizhk
Copy link

azizhk commented May 25, 2020

@cristianoccazinsp I've created an issue on react-native repo as well, because its a different renderer: facebook/react-native#28948
Please do subscribe there as well.

@guoyunhe
Copy link

guoyunhe commented May 29, 2020

Same here if we run $.ajax() in componentDidMount(). Our solution is to use a setTimeout():

{
  componentDidMount() {
    setTimeout(() => {
      $.ajax();
    }, 300);
  }
}

@azizhk
Copy link

azizhk commented Jun 5, 2020

Hi @acdlite (sorry for tagging you here),
Just wanted to know what React features would trigger the usage of unstable_runWithPriority. Maybe that might help in figuring out what is causing this issue and help with creating a reproduction.

@karthikravichandran94
Copy link

Hi Team,

I am facing this issue now in firefox browser. How to resolve this issue ? Any suggestion please?

@KyleAsaff
Copy link

KyleAsaff commented Sep 7, 2020

My error reporting system has been reporting me this error in production for my react app https://twisti.app. anyone know what is causing it or how to fix it? the error message is not very helpful

user info:

Firefox 60.0
Windows 7
Windows

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0

error:

error
Should not already be working.

/static/js/2.27fae31b.chunk.js at line 2

/*! For license information please see 2.27fae31b.chunk.js.LICENSE.txt */
(this.webpackJsonptwisti=this.webpackJsonptwisti||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(163)},function(e,t,n){"use strict" {snip}
//# sourceMappingURL=2.27fae31b.chunk.js.map

trace:


Status | internal_error
-- | --
Trace ID | 26d237fb8f5a4643b2fa8fc001a47e59
Span ID | ae29218588485a11
Operation Name | pageload



@oopsRookie
Copy link

This happens to me if I set a breakpoint in componentDidMount, either by clicking the line number in Firefox's debugger or by calling debugger in the code.

same with me, when i set a breakpoint between setState and Axios request in componentDidUpdate, this error will appear. But if i delete the breakpoint, everything is fine.

@leojh
Copy link

leojh commented Sep 30, 2020

Also seeing this reported all of a sudden by my application monitoring service.
All on Windows 10 and Firefox 80 so far.

@acdlite
Copy link
Collaborator

acdlite commented Jun 9, 2021

@julianfssen Thanks for the detailed write up!

So based on your description, Firefox has a bug where alert and debugger will pause the current event but will still spin the event loop to fire the next pending event, including message events which React uses to flush scheduled work. Then React throws an error because it detects that the previous render (the one with the debugger) hasn't finished yet.

My guess for why supportsMicrotask "fixes" the issue is that microtasks are part of the current event, so the debugger actually does block those from firing.

Perhaps there is a way we could detect this scenario in development and fail more gracefully. I'm loath to add more code to the production build to address something that is ultimately a Firefox bug, and one that only happens during development (unless you use an alert in prod, I guess, but that's not that common).

@alexandcote
Copy link

alexandcote commented Jun 9, 2021

I would be curious to know if the prompt triggered by beforeunload causes the same issue because we don't use alert in production but we see some occurrence of this error. Can also be confirm which is probably similar.

@gaearon
Copy link
Collaborator

gaearon commented Jun 9, 2021

Yea that's the one that got me worried. Confirm is pretty common for "do you want to stay on this page?" flows.

@acdlite
Copy link
Collaborator

acdlite commented Jun 9, 2021

Right, prompt seems legit.

So the fix for this would be pretty simple, I think — instead of throwing an error, we'd exit from the function. I think this would work because when the paused event continues and eventually finishes, it will re-schedule a new render to replace the one that we exited from.

But this is a bit fragile, and I'd rather not commit to supporting this workaround long term. Hopefully we can convince the Firefox team to fix the underlying issue.

@julianfssen
Copy link

@acdlite thanks for explanation! That makes sense, and I agree that altering logic to cater for a specific browser bug does not seem 'right'. However, the event loop bug in Firefox has been there for over a decade now so I'm not sure if it's going to be fixed anytime soon. Based on my tests, the microtasks implementation works correctly for the behavior above. Since most modern browsers support microtasks, perhaps this is 'fixed' if the implementation goes in the next release?

@alexandcote thanks for pointing that out, I forgot about confirm and prompt when testing. I believe the issue happens in Firefox if the modal is meant to pause execution, so prompt and confirm will likely trigger the same issue since it (should?) works similarly to alert. I can test it this weekend.

@gaearon thanks! I'd love to suggest a fix but my knowledge of React internals is not good at the moment. I'll have a look again and tinker around with the implementation this weekend based on @acdlite 's feedback. That said, if anyone wants to take over this issue, go ahead! The issue relates to WebSockets not pausing on calls that are supposed to block execution (e.g. alert, debugger, confirm, etc.) but there may be more to discover about it.

@joshunger
Copy link

joshunger commented Jun 30, 2021

We just ran across this in our Bugsnag logs this morning but it was ONLY for Chrome 83.0.4103 just like @mooflu. Maybe there is a bug in Chrome 83.0.4103 as well?

It might be related to this code -

  const [ready, toggleReady] = useState(false);
  useEffect(() => {
    if (branchKey && window.branch) {
      try {
        window.branch.init(branchKey, branchError => {
          if (!branchError) {
            toggleReady(true);
          }
        });
      } catch (branchError) {
        logError(branchError);
      }
    }
  }, [branchKey]);

@syntithenai
Copy link

Same error "Should not already be working" in Firefox but not Brave/Chrome (on Linux).
Problem code was trying to open a window (for polling login) in componentDidMount.

Problem goes away when I wrap the call in setTimeout.

setTimeout(function() {
				that.createLoginIframe()
			}, 1000)

@lebchen
Copy link

lebchen commented Nov 22, 2021

I am getting the same behaviour in Firefox, when React is rendering components from within an IntersectionObserver and rendering components from outside of the same IntersectionObserver at the same time. Using window.setTimeout(renderCall, 0) from within the IntersectionObserver solves the issue.

I also noticed this is only happening, if the component NOT rendered through IntersectionObserver is making a synchronous network call! I managed to duplicate the issue here:

https://codesandbox.io/s/should-not-already-be-working-x1syi?file=/src/App.js

I am guessing this observed behaviour in Firefox is related to the discussions in here.

@eps1lon
Copy link
Collaborator

eps1lon commented Jul 3, 2022

Still reproduces with Firefox 102 and React 17: https://bl72j.csb.app/

Good news is that this no longer repros in React 18: https://5u0drd.csb.app/

@Mayank-sudo
Copy link

Error shouldd not be working in firebox or in brave problem code was trying to open trying to open a window (for polling login) in componentDidMount.

Problem goes away when I wrap the call in setTimeout.

@nishant23122000
Copy link

hi, I want to work on any good first issue but cannot find any unassigned isue, can anyone help with it?

@koyuncuoglum95
Copy link

Hello @gzzo, I'm here first time and would like to contribute this project.

@Vicky-s-30
Copy link

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.

const Demo=()=>{
const [count,setCount]=useState(1);
const Inc=()=>setCount(count+1)
const Dec=()=>setCount(count-1)

render(


{count}


+
-

)}

export default Demo

solution:

const Demo=()=>{
const [count,setCount]=useState(1);
const Inc=()=>setCount(count+1)
const Dec=()=>setCount(count-1)

return(


{count}


+
-

)}

export default Demo

we only use return method in function, if we use insted of render that error "should not already be working" will occur

@Abhishekzod007
Copy link

Hello, this is going to be my first contribution and also it's a good first issue. I am exciting to work on it. Can u assign this task to me @gzzo

@Syncretik
Copy link

also happening for me when React tries to refresh state, version info:
React: 18.2.0
Firefox: 115.0.3 (64-bit)
OS: macOS Monterey v12.2.1 M1 Max

@yigit-tuncel
Copy link

i have a problem with firefox 115
React: 18.2.0
Firefox: 115.0.3 (64-bit)

@LucaDillenburg
Copy link

Hello @Abhishekzod007 , are you still working on this?
If not, I am considering fixing this issue myself. Thanks in advance!

@Ndhlovu1
Copy link

Ndhlovu1 commented Nov 6, 2023

Hmm, interesting first issue indeed.

@donishyar
Copy link

Hello , I'm here for the first time and would like to contribute this project.

@mohsinulhaq

This comment has been minimized.

@donishyar
Copy link

donishyar commented Mar 17, 2024

please read the Contributing Guide if you didn't.
you shouldn't use violence language and before you contribute in some repo you need to ask if someone assigned or not.

@KManiKumarReddy
Copy link

I just started facing this issue, in react-native, happening only while using react-native-walkthrough-tooltip in a certain place. we're updating screen visit counts to async storage there, it suddenly started showing up recently, it's fairly large project with more than 100 dependencies not sure what change is causing it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests