Importing moment-timzone and moment-range with webpack (Babel/ES6)

Question

I'm using Webpack with Babel loader. Writing by ES6 standards. I have installed both moment-timezone and moment-range with npm.

Both of these are moment.js plugins, and both of these depend on the moment package, and export a separate moment library. So when I do

import moment from 'moment-timezone'; import moment2 from 'moment-range'; 

then I get two separate references to moment.

How can I set it up so I could use moment with timezone and range functions?

Thanks!

Answer 1

Docs show CommonJS syntax for this:

var moment = require('moment'); require('moment-range'); require('moment-timezone');  // moment() now has both range and timezone plugin features 

In ES6:

import moment from 'moment'; import 'moment-range'; import 'moment-timezone'; 

EDIT

Since moment-timezone does not extend existing import but does extend moment itself, what about this?

import moment from 'moment-timezone'; import 'moment-range'; 

Answer 2

I had myself this problem with different packages: moment-timezone and frozen-moment. The root of all evil is having two moment dependencies in different parts of the tree. In my case, I had moment right under node_modules and also inside of frozen-moment's node-modules. This meant that moment-timezone and frozen-moment were using different moment instances.

Check that you are using versions of packages that are compatible with each other so that moment-range doesn't need to fetch a different version of moment. When you have it correctly you should be able to do this:

import moment from 'moment'; import momentTimezone from 'moment-timezone'; import momentRange from 'moment-range';  console.log(moment === momentTimezone === momentRange); // logs 'true' 

Keep in mind that's only for testing it's properly setup, you should use it like in glortho's answer:

import moment from 'moment'; import 'moment-timezone'; import 'moment-range';