How to make it work in IE11?

[rvision]

Based on documentation I don't understand - how to make it work in IE11?

If your application needs to be able to run on older JavaScript environments, such as Internet Explorer or React Native, enable this feature.

import {enableES5} from "immer"
enableES5()

I'm still getting "Object.isFrozen: argument is not an object" error in console.

Do I have to include some polyfills?

Thanks

[mweststrate]

That is all you should need indeed. Sounds like a specific issue in your case, can you provide a reproduction?

…

On Wed, 20 May 2020, 10:09 rvision, ***@***.***> wrote: Based on documentation I don't understand - how to make it work in IE11? If your application needs to be able to run on older JavaScript environments, such as Internet Explorer or React Native, enable this feature. import {enableES5} from "immer" enableES5() I'm still getting "Object.isFrozen: argument is not an object" error in console. Do I have to include some polyfills? Thanks — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#600>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCV5VUEP56PDZW77CTRSOM47ANCNFSM4NFX4G6Q> .

[rvision]

I'm using immer 6.05, added this to the app root:

import { enableES5 } from "immer";
enableES5();

It's a big legacy application so I am using immer only for new features, so it is used only in 3 reducers. When I rewire produce from immer like this in all 3 reducers:

// import produce from 'immer';
const produce = x => x;

application loads in IE without any errors (state update obviously doesn't work). Here is an example of the reducer, this all works as expected in Chrome:

//import produce from 'immer';
const produce = x => x;
import ACTION_TYPE from '../actions/actionTypes.ui';

const initialState = {
    confirmDialog: {
        showDialogId: null
    },
    banner: {
        showBannerId: null
    },
    data: {}
};

const ui = produce((state = initialState, action) => {
    const payload = action.payload;
    switch (action.type) {
        case ACTION_TYPE.CONFIRM_DIALOG.SHOW: {
            if (payload.dialogId === null) {
                delete state.data[state.confirmDialog.showDialogId];
            }
            if (payload.dialogId !== null) {
                state.data[payload.dialogId] = payload.data;
            }
            state.confirmDialog.showDialogId = payload.dialogId;
            break;
        }
        case ACTION_TYPE.BANNER.SHOW: {
            if (payload.bannerId === null) {
                delete state.data[state.banner.showBannerId];
            }
            if (payload.bannerId !== null) {
                state.data[payload.bannerId] = payload.data;
            }
            state.banner.showBannerId = payload.bannerId;
            break;
        }
        default:
            break;
    }
    return state;
});

export default ui;

Error is always "Object.isFrozen: argument is not an object" in console

[rvision]

If I understood correctly, object freezing is done only in development mode? Because this is from local environment, maybe it will work when deployed?

[rvision]

tried with setAutoFreeze(false), still the same error in IE11 :(

[mweststrate]

any stacktrace by chance ?

[mweststrate]

Ok, this is probably caused by the note at the end of the page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen, Object.isFrozen behaves differently in ES5 and ES2015. Sigh. Will try to release a fix in the coming days.

[rvision]

Well it seems that it works on production :) I've added this:

import { enableES5 } from "immer";
enableES5();
setAutoFreeze(process.env.NODE_ENV !== 'production' );

no errors on production, on local environment still "Object.isFrozen: argument is not an object"

I really don't know what to say...

[aleclarson]

🎉 This issue has been resolved in version 6.0.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[rvision]

Updated, working as expected. Thanks a lot guys, fantastic library

[lantanios]

This issue has been resolved in version 6.0.6 but appeared again in 7.0.1 .

IE11 is throwing "Object.isFrozen: argument is not an Object" error.

On 6.0.6 there is no error and on 7.0.1 in dev mode the error still appears.

As Immer has no dependencies it's a less issue but still will be great if it will work on with latest version.

[mweststrate]

New release should hit npm in ~10 minutes. If that one doesn't work, please open a fresh issue as comments on closed issues have little visibility.

…

On Wed, Jun 24, 2020 at 2:59 AM Giorgi Koranashvili < ***@***.***> wrote: This issue has been resolved in version 6.0.6 but appeared again in 7.0.1 . IE11 is throwing "Object.isFrozen: argument is not an Object" error. On 6.0.6 there is no error and on 7.0.1 in dev mode the error still appears. As Immer has no dependencies it's a less issue but still will be great if it will work on with latest version. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#600 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBDZURCQZXF7LVQSUWLRYFMXNANCNFSM4NFX4G6Q> .

[aleclarson]

🎉 This issue has been resolved in version 7.0.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lantanios]

New release should hit npm in ~10 minutes. If that one doesn't work, please open a fresh issue as comments on closed issues have little visibility.

Works without issues. Thank you for quick response and resolution!

[mattsputnikdigital]

In immer 8.0 I am getting this error now "Cannot create property for a non-extensible object" in IE11, no other browser

Using setAutoFreeze(false) stops this error.

The error is thrown in React and caught in flushSyncCallbackQueueImpl(). I believe Formik is somehow involved.

[mweststrate]

@mattsputnikdigital please don't comment on issues closed for a year, file your own instead by following the issue template.