Merge pull request #4455 from reactioncommerce/fix-4454-dancastellon-…

…moment-still-included

#4454 Dynamically import Moment locales to reduce client bundle size

client/modules/core/helpers/templates.js

@@ -1,5 +1,4 @@
 import _ from "lodash";
-import "moment/min/locales.min.js";
 import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
 import { Accounts } from "meteor/accounts-base";
@@ -19,15 +18,26 @@ import { toCamelCase } from "/lib/api";
 
 // Lazily load moment-timezone.months
 const monthOptionsVar = new ReactiveVar([]);
-async function lazyLoadMonths() {
-  if (monthOptionsVar.get().length) return;
-  const { locale, months } = await import("moment-timezone");
+const monthOptionsLangVar = new ReactiveVar("");
 
+/**
+ * @name lazyLoadMonths
+ * @summary Dynamically imports MomentJS locales and returns an array of months in user's language.
+ * @returns {Object[]} Array of objects with value and label properties
+ */
+async function lazyLoadMonths() {
   let lang = i18next.language;
   if (lang === "zh") {
     lang = "zh-cn";
   }
 
+  const areMonthsAlreadyLoaded = monthOptionsVar.get().length;
+  const hasLanguageNotChanged = monthOptionsLangVar.get() === lang;
+  if (areMonthsAlreadyLoaded && hasLanguageNotChanged) return;
+
+  await import("moment/min/locales.min.js");
+  const { locale, months } = await import("moment-timezone");
+
   locale(lang);
 
   const monthOptions = [];
@@ -46,6 +56,7 @@ async function lazyLoadMonths() {
   }
 
   monthOptionsVar.set(monthOptions);
+  monthOptionsLangVar.set(lang);
 }
 
 Template.registerHelper("Collections", () => Collections);
@@ -118,7 +129,7 @@ Template.registerHelper("yearOptions", (showDefaultOption = true) => {
   }
 
   let year = new Date().getFullYear();
-  for (let i = 1; i < 9; i += 1) {
+  for (let inc = 1; inc < 9; inc += 1) {
     yearOptions.push({
       value: year,
       label: year

imports/plugins/core/components/lib/hoc.js

@@ -42,11 +42,9 @@ export function withMoment(component) {
   return lifecycle({
     componentDidMount() {
       import("moment")
-        .then((moment) => {
+        .then(({ default: moment }) => {
           moment.locale(Reaction.Locale.get().language);
-          this.setState({
-            moment
-          });
+          this.setState({ moment });
           return null;
         })
         .catch((error) => {
@@ -69,10 +67,8 @@ export function withMomentTimezone(component) {
   return lifecycle({
     componentDidMount() {
       import("moment-timezone")
-        .then((moment) => {
-          this.setState({
-            momentTimezone: moment.tz
-          });
+        .then(({ default: moment }) => {
+          this.setState({ momentTimezone: moment.tz });
           return null;
         })
         .catch((error) => {

imports/plugins/core/orders/client/templates/list/pdf.js

@@ -17,7 +17,7 @@ Template.completedPDFLayout.onCreated(async function () {
   });
 
   this.readyVar = new ReactiveVar(false);
-  this.moment = await import("moment");
+  this.moment = await import("moment").default;
   this.readyVar.set(true);
 
   const currentRoute = Router.current();

imports/plugins/included/jobcontrol/server/jobs/cart.js

@@ -8,7 +8,7 @@ import { Job } from "/imports/plugins/core/job-collection/lib";
 let moment;
 async function lazyLoadMoment() {
   if (moment) return;
-  moment = await import("moment");
+  moment = await import("moment").default;
 }
 
 /**

imports/plugins/included/jobcontrol/server/jobs/cleanup.js

@@ -6,7 +6,7 @@ import { Jobs } from "/lib/collections";
 let moment;
 async function lazyLoadMoment() {
   if (moment) return;
-  moment = await import("moment");
+  moment = await import("moment").default;
 }
 
 export function addCleanupJobControlHook() {

imports/plugins/included/search-mongo/server/methods/searchcollections.js

@@ -10,7 +10,7 @@ import { transformations } from "./transformations";
 let moment;
 async function lazyLoadMoment() {
   if (moment) return;
-  moment = await import("moment");
+  moment = await import("moment").default;
 }
 
 const requiredFields = {};

package.json

@@ -147,7 +147,6 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "8.2.3",
     "babel-jest": "22.4.4",
-    "babel-plugin-dynamic-import-node": "1.2.0",
     "babel-plugin-inline-import": "3.0.0",
     "babel-plugin-lodash": "3.3.2",
     "babel-plugin-module-resolver": "3.1.1",
@@ -200,7 +199,6 @@
   "babel": {
     "plugins": [
       "transform-class-properties",
-      "dynamic-import-node",
       "babel-plugin-inline-import",
       [
         "lodash",