Module not found: Error: Can't resolve 'immer/dist/immer'

233 views Asked by At

I am getting this error

Module not found: Error: Can't resolve 'immer/dist/immer'

even though immer's version in package.json and immer's version as a redux-toolkit dependency are same and I have got use-immer installed as well.

This is link to my package.json https://drive.google.com/file/d/1H2O9A18fPyB_xawzyR-NPUV8dTOukNvn/view?usp=sharing

This is link to my package-lock.json https://drive.google.com/file/d/1_eC4izxcnhw9ns3Ji7bnfsHzc0hyXZA1/view?usp=sharing

my redux store file

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import ShowSideBar from '../Reducers/ShowSideBar';
import AddNewBoardB from '../Reducers/AddNewBoardB';
import Boards from '../Reducers/Boards';
import AddNewTask from '../Reducers/AddNewTask';
import EditBoard from '../Reducers/EditBoard';
import SetTaskView from '../Reducers/SetTaskView';
import Columns from '../Reducers/Columns';
import { enableMapSet } from 'immer';

enableMapSet();

const rootReducer = combineReducers({
    ShowSideBar:ShowSideBar,
    AddNewBoardB: AddNewBoardB,
    Boards:Boards,
    Columns:Columns,
    AddNewTask:AddNewTask,
    EditBoard:EditBoard,
    TaskView:SetTaskView,
})

export const Store = configureStore({
    reducer : rootReducer,
});

Edited : now I am getting this error

Uncaught Error: [Immer] The plugin for 'MapSet' has not been loaded into Immer. To enable the plugin, import and call enableMapSet() when initializing your application.

even though my dependency immer version and Redux-toolkit's immer version are same. I followed Taiwei tuan's advice but still getting this error.

1

There are 1 answers

0
Affan Khan On BEST ANSWER

This issue got resolved.

I actually need to call the enableMapSet in the reducer's slice file in which I am assigning a new set to reducer slice. I am having a sub state in which I am assigning a new set to initial sub state value in which's file I need to call enableMapSet

Sub State - Columns.jsx

import { createSlice } from "@reduxjs/toolkit";
import { enableMapSet } from "immer";
enableMapSet();
const Columns = createSlice({
    name:"Columns",
    initialState : new Set(),
    reducers : {
        AddColumn(state,action){
            state = new Set(...state, ...action.payload);
        }
    }
});

export const { AddColumn } = Columns.actions;

export default Columns.reducer;