Giters

immerjs / immer

Create the next immutable state by mutating the current one

Home Page:https://immerjs.github.io/immer/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Maximum call stack size exceeded error in production mode

toy9986619 opened this issue · comments

commented

🐛 Bug Report

I make a react component using styled (from @mui/material/styles, @emotion), it will crash when the reducer change.
If the data use a native div or "Box" component (from material-UI), it will not crash.

It doesn't crash when I use development mode.

Link to repro

link: https://toy9986619.github.io/immer-issue/
repo: https://github.com/toy9986619/immer-issue

To Reproduce

  • insert an styled component instance create from emotion to immer state.

Observed behavior

An error comes from immer code

Uncaught RangeError: Maximum call stack size exceeded
at Object.hasOwnProperty ()
at common.ts:45:25

image

image

Expected behavior

Will not have error

Environment

  • Immer version: 9.0.16
  • I filed this report against the latest version of Immer
  • Occurs with setUseProxies(true)
  • Occurs with setUseProxies(false) (ES5 only)
commented

similar like #673 ?

commented

The exception comes from React, not immer, and the example project is too big to work through, but probably the issue is caused by storing 'foreign' or circular objects in your reducer state? If anything isn't a plain object, or should not be drafted by Immer because it is not really state, make sure to mark it as non immerable x[immerable] = false. If you can't find the problem, try to narrow the test project down until it consists of a single file, component, reducer and action.

commented 
actions.addHintMsg({
   [immerable]: false
   ...

or in addHintMsg call Object.freeze on the incoming object first will probably do the trick

commented

Thanks for your reply, I agree the project is too big now.
I know there are some unsafe actions when using redux, but it is a base code in our project.
I roll back the redux reducer to use the mutable reducer. I avoid the issue now.

I will try to narrow down the test and find out if it can reproduce or not.

I think I can close the issue now.

commented

@toy9986619 : yeah, it sounds like you're trying to put a component instance or similar into the Redux state, and you absolutely should not ever do that!