使用webpack导入moment-timzone和moment-range（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';

Answer 3

All the above solutions did not work for me and I had to resort to this:

import moment from 'moment';
window.moment = moment;
import {extendMoment} from 'moment-range';
extendMoment(window.moment);

A little hacky but works.

Answer 4

I find the default implementation of moment-range pretty ugly, since it just extends the moment object, and IMO that's kinda "hacky".

This is the way I'm doing it:

import { default as DateRange } from 'moment-range';

const myRange = new DateRange(x, y);

Answer 5

I managed to import moment-timezone and moment-range with this code:

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

const moment = momentRange.extendMoment(Moment);

Answer 6

My project uses webpack with ES6 (same as OP I think), with React. I need functionality from moment timezone. After adding both moment and moment-timezone npm dependencies, this import statement works:

import moment from 'moment-timezone';

That allows me to make calls like moment.tz.guess();

What really threw me off though- just adding that import doesn't make moment available in my browser's dev console. Going through the comments in https://github.com/moment/moment/issues/2608 , someone mentioned this snippet which makes moment available in the dev console:

window.moment = moment;

Answer 7

This worked for me

import * as moment from 'moment-timezone'
import * as momentRange from 'moment-range'