Error: First argument to `createDraft` must be a plain object, an array, or an immerable object


import React, { useState, useEffect } from 'react'
import './HomeCss.css'
import { Card, Button, Container, Row, } from 'react-bootstrap'
import Axios from 'axios'
import { useStoreActions, useStoreState } from 'easy-peasy'

const Layout = () => {
  const [items, setItmes] = useState([])
  const count = useStoreState(state => state.count)
  const add = useStoreActions(actions => actions.add)

  useEffect(() => {
      .then(res => {
      .catch(err => {

  function displayCard() {
    if (!items.length) return null

    return, index) => (
      <Card style={{
        width: '21rem',
        marginRight: "7px",
        marginLeft: '7px',
        marginBottom: '13px',
        display: 'flex',
        alignItems: 'center'
        <Card.Img variant="top" src={item.url} />
          <Button variant="primary"
            onClick={() => add()}
            Buy Now


  return (

export default Layout

Due to onClick={() => add()} line on the above code i am having this error:
Error: First argument to createDraft must be a plain object, an array, or an immerable object

And this is how model.js file look’s like from where i am getting this state.count and actions.add inside my Home.js file above if somehow it’s usefull:


import { action } from "easy-peasy";

export default {
    count: 0,
    add: action((state, id) => {
        return state.count + 1

Link to the repo:

Hey Charan,

nice to meet you! :slightly_smiling_face:

It would be awesome to see a (working) example of your project on codesandbox, so that we can fiddle around with it.

E.g. the error is talking about createDraft, but I think most of us don’t know what this function does and how it connects to other stuff.

I haven’t really worked with easy-peasy but it sounds like the error is coming from Immer (well immer-peasy I’m guessing). I really do not know enough about the libraries to be of much help I think.

Does mutating the state as is expected, change anything (i.e. no return and just state.count += 1). Is the state an Object and what does the store look like?

It seems like the Immer createDraft function used under the hood isn’t receiving the data type it is expecting.

I know this isn’t of much help but it’s all I got right now. I would need to learn more about the libraries and likely see your full code (repo or a live version running on something like Codesandbox).

Hi miku86 nice to meet you to

Here is the link to repo:

Hi lasjorg

Here is the link to repo:

I’ve used Immer a lot, and just glancing at your code, I’m assuming it’s what @lasjorg says. You’re returning a value from something you’re not supposed to be returning from. Immer lets you use an imperative API; you should be modifying the value, not returning a new one.

The underlying function, createDraft, takes the state, you modify a Proxy of the state (the “draft”), then the function spits out a new version of the state with the changes applied

1 Like


import { action } from "easy-peasy";

export default {
    count: 0,
    add: action((state, id) => {
        state.count += 1

Problem is exactly what DanCouper referring to above that Immer lets you use an imperative API; and should be modifying the value like this state.count += 1, not returning a new one like this return state.count + 1 inside the model.js file.