YuriGor / deepdash

eachDeep, filterDeep, findDeep, someDeep, omitDeep, pickDeep, keysDeep etc.. Tree traversal library written in Underscore/Lodash fashion
https://deepdash.io/
MIT License
275 stars 12 forks source link

deepdash is not webpackable #36

Closed ArSn closed 3 years ago

ArSn commented 5 years ago

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: image

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 commented 5 years ago

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

YuriGor commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

ArSn commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

rnenjoy commented 4 years ago

Doesnt work for me.

import filterDeep from 'deepdash-es/filterDeep';

My entire nuxt app crashes with

Unexpected identifier

YuriGor commented 4 years ago

Show full error please

rnenjoy commented 4 years ago

Problem is i dont get any useful error at all

image

YuriGor commented 4 years ago

Did you try not 'es' version?

rnenjoy commented 4 years ago

Trying now!

rnenjoy commented 4 years ago

import pickDeep from 'deepdash/pickDeep';

worked with nuxt it seems! thanks!

YuriGor commented 4 years ago

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

rnenjoy commented 4 years ago

Pjuh, i had one left!:)

YuriGor commented 4 years ago

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

rnenjoy commented 4 years ago

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