(1.6.0) Iterating over Arrays in draft state causes "Maximum call stack size exceeded" errors

[lotz]

Please specify:

• Feature request: ______
  • I am willing to implement this myself
• Issue: Iterating over Arrays in draft state causes "Maximum call stack size exceeded" errors
  • Version: 1.6.0 (this issue did not occur in version 1.5.0)
  • Reproduction (not really simple; requires running an app in production mode):
    • Download the attached example project, DraftArrayBug.zip.
    • Unzip, and run npm install.
    • Run npm start to see the example app running correctly at http://localhost:4200/.
      • Clicking the Update button will use Immer to update some state, and increment a counter.
    • Run npm run build (which runs ng build --prod).
    • cd into dist/DraftArrayBug and use a Node module like http-server to host the production built files. (e.g. npx http-server).
    • Open the locally hosted production build. (e.g. access at http://127.0.0.1:8080/, if using http-server)
      • Click the "Update" button and note the errors in the browser console (this was done using Chrome).
  • Expected behavior: I should be able to iterate over JS Arrays in my draft state (using forEach, or for...of or a simple for) to update the state of all items in the Array.
  • Observed behavior: When run in a production build, the following error occurs:

    main.9049236db8eb60025a4d.js:1 ERROR RangeError: Maximum call stack size exceeded
    at Function.isFrozen (<anonymous>)
    at e (main.9049236db8eb60025a4d.js:1)
    at main.9049236db8eb60025a4d.js:1
    at uu (main.9049236db8eb60025a4d.js:1)
    at e (main.9049236db8eb60025a4d.js:1)
    at main.9049236db8eb60025a4d.js:1
    at uu (main.9049236db8eb60025a4d.js:1)
    at e (main.9049236db8eb60025a4d.js:1)
    at main.9049236db8eb60025a4d.js:1
    at uu (main.9049236db8eb60025a4d.js:1)
    

    • Attempting to access items in the Array by index also results in an undefined for the item being selected by index.
  • Occurs when using Proxies (use setUseProxies(true)) <-- But only when built for production! Does not occur when setUseProxies(false) is used in the production build.
  • Occurs in the ES5 implementation (use setUseProxies(false))

[mweststrate]

Can you provide the json of the state before you try to update it? And the code producer that you are applying to it? Op wo 19 sep. 2018 om 16:55 schreef Kurt Legerlotz <[email protected]

…

: Please specify: - Feature request: ______ - I am willing to implement this myself - Issue: *Iterating over Arrays in draft state causes "Maximum call stack size exceeded" errors* - Version: *1.6.0* *(this issue did not occur in version 1.5.0)* - Reproduction (not really simple; requires running an app in production mode): - Download the attached example project, DraftArrayBug.zip <https://github.com/mweststrate/immer/files/2397563/DraftArrayBug.zip> . - Unzip, and run npm install. - Run npm start to see the example app running *correctly* at http://localhost:4200/. - Clicking the Update button will use Immer to update some state, and increment a counter. - Run npm run build (which runs ng build --prod). - cd into dist/DraftArrayBug and use a Node module like http-server to host the production built files. (e.g. npx http-server). - Open the locally hosted production build. (e.g. access at http://127.0.0.1:8080/, if using http-server) - Click the "Update" button and note the errors in the browser console (this was done using Chrome). - Expected behavior: I should be able to iterate over JS Arrays in my draft state (using forEach, or for...of or a simple for) to update the state of all items in the Array. - Observed behavior: When run in a production build, the following error occurs: main.9049236db8eb60025a4d.js:1 ERROR RangeError: Maximum call stack size exceeded at Function.isFrozen (<anonymous>) at e (main.9049236db8eb60025a4d.js:1) at main.9049236db8eb60025a4d.js:1 at uu (main.9049236db8eb60025a4d.js:1) at e (main.9049236db8eb60025a4d.js:1) at main.9049236db8eb60025a4d.js:1 at uu (main.9049236db8eb60025a4d.js:1) at e (main.9049236db8eb60025a4d.js:1) at main.9049236db8eb60025a4d.js:1 at uu (main.9049236db8eb60025a4d.js:1) - Attempting to access items in the Array by index also results in an undefined for the item being selected by index. - Occurs when using Proxies (use setUseProxies(true)) <-- *But only when built for production! Does not occur when setUseProxies(false) is used in the production build.* - Occurs in the ES5 implementation (use setUseProxies(false)) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#198>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhGiK0swAjmQFNLR5Ltg111Rwp9xbks5uclrrgaJpZM4WwWOY> .

[lotz]

That can be found in app.component.ts in the Angular project.

The initial state:

  {
    greeting: 'Hello!',
    items: [{ num: 10 }, { num: 20 }, { num: 30 }]
  }

When clicking the Update button in the example, each num value will be incremented.

[mweststrate]

Confirmed, and confirmed that bug was not present in 1.5.0

[mweststrate]

@lotz I think (as I don't entirely understand the problem, but somehow webpack and the immer package setup didn't play nicely together), this issue will be fixed by 1.7.2, could you confirm?

[lotz]

Thanks, I will give it a try soon.

[lotz]

@mweststrate We have confirmed that the bug is fixed. Thanks!