Unable to deep clone

Question

I want to make a copy of an object.
Following that, I plan to modify values within the copy but these
modifications should not affect the original object.

Thus I want to make a clone and presently using lodash's deepClone.

But it keeps throwing the following error:

Error!Object(...) is not a function

There is no function within my object. It is just in following structure.
They are just key values where values are either strings or booleans.

const myOriginalObject {
    mainKey : {
        isMobile: true,
        data: {
            id: '',
            header: '',
            flag: '',
            desc1: '',
            desc2: '',
            logo: {
                src: '',
                alt: '',
            },
            img: {
                src: '',
                alt: '',
            },
        }
    }
}

Just to test it out created a random object as follows.
And even this throws same error.

  const myOriginalObject = {
    b: '',
    c: ''
  }

This is the implementation to deep copy. myOriginalObject can be either one of above objects.

import { cloneDeep } from 'lodash/cloneDeep';

const myClone = cloneDeep(myOriginalObject);

What am I doing wrong? Pls advice. Thanks.

UPDATE:

My lodash version from package.json

"lodash": "^4.17.20",

Error:

render had an error: TypeError: Object(...) is not a function

It's not saying there's a function in your object. Please include the *complete* error and the lodash portion of your package.json. This is how `cloneDeep` is used, so either the error is coming from somewhere else or there's a packaging/import/export issue. (Noting that your first example isn't valid JS.) — Dave Newton, Jun 14 '21 at 15:10
@DaveNewton Updated the version above. Error wise there isn't much else. Just says render had an error and the previously mentioned error. — Fllappy, Jun 14 '21 at 15:18
`import { cloneDeep } from 'lodash/cloneDeep'` -> `import cloneDeep from 'lodash/cloneDeep'` since you're directly importing, no need for importing individual parts. Your other option is `import { cloneDeep } from 'lodash'` but I'd advise to use the first one. — VLAZ, Jun 14 '21 at 15:21
@VLAZ Not sure what kinda magic going on. Switching to import cloneDeep from 'lodash' works now. Thank you. — Fllappy, Jun 14 '21 at 15:48
@Fllappy `import { cloneDeep }` will import the *named export* called `cloneDeep`. `import cloneDeep` will import the *default export* and just give it the `cloneDeep` name. The `'lodash/cloneDeep'` module only exports a single function as a default export. That's why using `import { cloneDeep }` doesn't work - there is no *named* export called that. The `'lodash/someFunction'` packages are there to allow you to only import things one by one. `import { cloneDeep } from 'lodash'` will load the *entire* lodash module and then only get `cloneDeep` out of it. It's wasteful. — VLAZ, Jun 14 '21 at 15:59

score -1 · Answer 1 · answered Jun 14 '21 at 16:09

try with this

const myOriginalObject {
    mainKey : {
        isMobile: true,
        data: {
            id: '',
            header: '',
            flag: '',
            desc1: '',
            desc2: '',
            logo: {
                src: '',
                alt: '',
            },
            img: {
                src: '',
                alt: '',
            },
        }
    }
}

const newObj = JSON.parse(JSON.stringify(myOriginalObject));

Now make any changes to newObj it will not reflect to myOriginalObject;

Unable to deep clone

1 Answers1