Conditional moment require still always results in included nested dependency

[adamJLev]

This may be a webpack or other issue, but thought its good to be aware of it.

I am using moment in other parts of my code so I have it imported via ES imports and so on, so I am passing it in manually like

import moment from 'moment';
Vue.use(require('vue-moment'), {moment: moment});

All is good, but when I use https://github.com/webpack-contrib/webpack-bundle-analyzer to check out what's actually outputted in my bundle, I see that the conditional require('moment') in this library is actually causing the code to be included in the bundle.
I can confirm that removing that 1 conditional line makes the nested moment not load anymore in the bundle.

Very confuzzled, any ideas?
Thanks!

[brockpetrie]

Definitely thinking this is a webpack issue. I wasn't able to reproduce it at all, even before the conditional require was added. I'm not sure if it's outdated versions or environment problems or what...

[adamJLev]

Yeah weird!

I found a workaround though, so I'll share here in case anyone else has the same issue.
Using yarn you can pin down a specific version and it will prevent duplicate nested dependencies from being installed. This solved the issue for me.

Just add something like this to your package.json:

  "resolutions": {
    "moment": "2.21.0"
  },

[memic84]

I think i might have the same issue. When i check the bundle analyzer, it shows me that all the locales from the moment package are loaded and it's about 400kb.

This is my code.

import moment from 'vue-moment'
Vue.use(moment);

I tried the resolutions, but it didn't work. Can you explain how to implement the workaround?

[brockpetrie]

@memic84 Moment's locale bloat is a separate issue. See this: moment/moment#1435 (comment), and this: moment/moment#2517 for workarounds.