deepdash is not webpackable

[ArSn]

I created a simple demo project and included the dist bundle within it to show my problem. I am using deepdash very much as described in the docs, like this:

import _ from 'lodash';
import deepdash from 'deepdash';

deepdash(_);

(reference)

However, webpack seems to have some kind of problem with this, since it creates this line in the bundle:

deepdash__WEBPACK_IMPORTED_MODULE_1___default()(lodash__WEBPACK_IMPORTED_MODULE_0___default.a);

(reference)

which then leads to the following error in the browser:

Now I have to put a disclaimer here: I am not entirely sure this is either a deepdash or webpack problem, so I am happy to report it over at webpack if you feel deepdash is doing everything correctly. I am also not sure that I am not just a bit stupid and screw up something myself - in that case, sorry!

I hope the minimal project I set up helps debugging a bit. If I can do anything to help debug, I am happy to do so.

P.S.: This works absolutely fine in node.js where I run all my tests with mocha and such, but webpack just won't take it.

[YuriGor]

Thank you for the demo project, I'll take a look

[YuriGor]

Well, I didn't dig a lot about what and why: I am not familiar with webpack. I just tried es versions of lodash and deepdash and it works, hope it will be enough for you.

[ArSn]

Wow, that was quick, thanks!

However, I do not yet fully grasp the concept of having dedicated "ES" packages and would very much like to use the standard ones. Also, for some reasons a lot of my tests break when I use the ES-Versions of lodash and deepdash.

Therefore I will try and figure out what the issue is and hopefully come back with a pull request here (or close the issue should it turn out deepdash is not to blame after all).

[YuriGor]

According to my experience with rollup - an error I see in your case looks like webpack is trying to use deepdash as ES module, that 'default' keyword you know. So possibly you need to configure webpack properly to handle CJS module.

Or maybe you should not try to 'import' modules in your src, but 'require' them instead.

Try to investigate in these two directions, please. I am also interested but currently, I have absolutely no time for doing this by myself.

BTW using new es module format has a huge benefit - tree shaking works perfectly when you use bundlers which support this feature - final bundle size may be reduced significantly.

[YuriGor]

Also, for some reasons, a lot of my tests break when I use the ES-Versions of lodash and deepdash. That's also interesting. Do you think lodash/deepdash behave differently in 'es' version?

[YuriGor]

Closing this issue for now (just for better npms stats) - let me know if you will find something.

[ArSn]

@YuriGor the great community on stackoverflow was able to help me out, specificlally this answer.

TL;DR: As it turns out, webpack is defaultly using the "browser" version from your package.json, and therefore for deepdash it uses the "deepdash.min.js", which does not export deepdash from the module that it is supposed to be (which totally makes sense since it is supposed to be a browser-version, I get that).

Anyways, for now this works for me since I just import deepdash with:

import deepdash from 'deepdash/deepdash';

I did however think "man, wouldn't it be cool if deepdash was able to handle the 'standard approach' with webpack as well"?

So I went ahead and added a line of code to the deepdash.min.js locally (just to test the approach):

module.exports = deepdash;

And tada... it works fine with

import deepdash from 'deepdash';

as well.

Now of course we can not just add the line I added for fun to the minfied version, since I am pretty sure it is not "browser safe". I would be happy to create a pull request to solve this, but I do not have an approach here. Do you have any idea how to go about this? Given that you are willing to tackle that at all since you told me to just use the ES version before, I know ;)

[YuriGor]

Thank you for investigation, i need to dig into package.json format, maybe it's better to just remove "browser" or just get the right idea how to use it correctly. Hope to do this on this weekend

[YuriGor]

Hey, there is no more "browser" field in package.json, hope now webpack will be happy. (v4.2.15)

[rnenjoy]

Doesnt work for me.

import filterDeep from 'deepdash-es/filterDeep';

My entire nuxt app crashes with

Unexpected identifier

[YuriGor]

Show full error please

[rnenjoy]

Problem is i dont get any useful error at all

[YuriGor]

Did you try not 'es' version?

[rnenjoy]

Trying now!

[rnenjoy]

import pickDeep from 'deepdash/pickDeep';

worked with nuxt it seems! thanks!

[YuriGor]

Support is not free here, you know.. but luckily we accept GitHub stars instead of coins ;)

[rnenjoy]

Pjuh, i had one left!:)

[YuriGor]

Welcome to Super Star Support Plan, now you can call me at midnight (but first you will need my phone number, paid separately)

[rnenjoy]

No problem, i can find the number myself :D hahaha