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 0 · Answer 1 · answered Jun 14 '21 at 16:05

0

You could do:

import { cloneDeep } from 'lodash'; // <= Notice import method

const myOriginalObject = { a: '', b: ''};

const myClonedObj = cloneDeep(someObj);

Or:

import _ from 'lodash'; // <= Notice import method

const myOriginalObject = { a: '', b: ''};

const myClonedObj = _.cloneDeep(someObj);

It seems that importing from 'lodash/cloneDeep' doesn't work (I'm not sure why, however).

[It could be that cloneDeep uses different directories for its full implementation in _, but again, not sure.]

answered Jun 14 '21 at 16:05

H. Almidan

361
3
9

"*It seems that importing from 'lodash/cloneDeep' doesn't work*" it should work fine if you use `import cloneDeep from 'lodash'` (import the default export). See [How to Import a Single Lodash Function?](https://stackoverflow.com/q/43479464) and [Correct way to import lodash](https://stackoverflow.com/q/35250500) – VLAZ Jun 14 '21 at 17:26

score 0 · Answer 2 · 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

2 Answers2