Locales difference between version 2.24.0 and 2.27.0

[Alin13]

Hello,

I'm using moment with react and webpack and I'm having some issues with the locale config. In my app I need to have "en" and "fr" locales.
For this I have this config:

• in the root file:
  import moment from 'moment';
import 'moment/src/locale/fr';

• I also added moment-locales-webpack-plugin in webpack config - because I thought that moment will import all the languages by default (anyway, this shouldn't have an impact on the problem)

new MomentLocalesPlugin({
      localesToKeep: ['en', 'fr']
})

The problem

• for the latest version (^2.27.0) I only get "en" language. This works good for version 2.24.0. Tested with console.log(moment.locales())

Is there something that I do wrong ? Am I missing some configs ?

Thank you for your time!

[MinusFour]

What if you load it like this:

import 'moment/locale/fr';

[Alin13]

Nope, it doesn't work on any of these versions.

[MinusFour]

Webpack is kind of weird with moment and that dynamic require... But I just tried it out on a fresh webpack project and it worked just fine with both (moment: 2.27.0 and webpack : 4.43.0). Although the non-umd builds do throw up a warning....

And some say that locale loading doesn't work up anymore on that issue #5484

Maybe moment should consider the idea of scrapping loading locales and let the user handle that directly.

[jrief]

Having the same issue with moment-2.27.0 in TypeScript:

import moment from 'moment';
import 'moment/locale/de-at';
moment.locale('de-at');
console.log(moment.locale());
console.log(moment.locales());

this prints:

en
["en"]

which apparently is wrong and dates are not localized.

[MinusFour]

@jrief Well I'm just having a hard time reproducing it. Is your build picking up moment UMD builds or is trying to use the es6 builds? If possible, I would like to see the package.json for moment inside node_modules.

[jrief]

sure, here is my package.json:

{
  "name": "mcs-connect-webui",
  "version": "0.1.0",
  "description": "Stencil App Starter",
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate",
    "watch": "stencil build --dev --watch"
  },
  "dependencies": {
    "@stencil/core": "1.8.4",
    "@stencil/router": "^1.0.1",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "moment": "2.27.0"
  },
  "license": "MIT",
  "devDependencies": {
    "@stencil/sass": "^1.3.1",
    "@types/jest": "24.0.25",
    "@types/puppeteer": "1.20.3",
    "fetch-mock-jest": "^1.3.0",
    "http-proxy": "^1.18.0",
    "jest": "24.9.0",
    "jest-cli": "24.9.0",
    "mime-types": "^2.1.27",
    "puppeteer": "1.20.0"
  }
}

I'm actually building through the stenciljs build script, rather than webpack.

[Alin13]

@MinusFour

Here's the package.json for moment:

  "_from": "moment@latest",
  "_id": "moment@2.27.0",
  "_inBundle": false,
  "_integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
  "_location": "/moment",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "moment@latest",
    "name": "moment",
    "escapedName": "moment",
    "rawSpec": "latest",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/",
    "/react-moment-proptypes"
  ],
  "_resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
  "_shasum": "8bff4e3e26a236220dfe3e36de756b6ebaa0105d",
  "_spec": "moment@latest",
  "_where": "C:\\Users\\aaa\\Desktop\\workspace\\project",
  "author": {
    "name": "Iskren Ivov Chernev",
    "email": "iskren.chernev@gmail.com",
    "url": "https://github.com/ichernev"
  },
  "bugs": {
    "url": "https://github.com/moment/moment/issues"
  },
  "bundleDependencies": false,
  "contributors": [
    {
      "name": "Tim Wood",
      "email": "washwithcare@gmail.com",
      "url": "http://timwoodcreates.com/"
    },
    {
      "name": "Rocky Meza",
      "url": "http://rockymeza.com"
    },
    {
      "name": "Matt Johnson",
      "email": "mj1856@hotmail.com",
      "url": "http://codeofmatt.com"
    },
    {
      "name": "Isaac Cambron",
      "email": "isaac@isaaccambron.com",
      "url": "http://isaaccambron.com"
    },
    {
      "name": "Andre Polykanine",
      "email": "andre@oire.org",
      "url": "https://github.com/oire"
    }
  ],
  "deprecated": false,
  "description": "Parse, validate, manipulate, and display dates",
  "devDependencies": {
    "benchmark": "latest",
    "coveralls": "latest",
    "cross-env": "^6.0.3",
    "es6-promise": "latest",
    "eslint": "~6",
    "grunt": "latest",
    "grunt-benchmark": "latest",
    "grunt-cli": "latest",
    "grunt-contrib-clean": "latest",
    "grunt-contrib-concat": "latest",
    "grunt-contrib-copy": "latest",
    "grunt-contrib-uglify": "latest",
    "grunt-contrib-watch": "latest",
    "grunt-env": "latest",
    "grunt-exec": "latest",
    "grunt-karma": "latest",
    "grunt-nuget": "latest",
    "grunt-string-replace": "latest",
    "karma": "latest",
    "karma-chrome-launcher": "latest",
    "karma-firefox-launcher": "latest",
    "karma-qunit": "latest",
    "karma-sauce-launcher": "4.1.4",
    "load-grunt-tasks": "latest",
    "node-qunit": "latest",
    "nyc": "latest",
    "prettier": "latest",
    "qunit": "^2.10.0",
    "rollup": "latest",
    "typescript": "^1.8.10",
    "typescript3": "npm:typescript@^3.1.6",
    "uglify-js": "latest"
  },
  "dojoBuild": "package.js",
  "ender": "./ender.js",
  "engines": {
    "node": "*"
  },
  "homepage": "https://momentjs.com",
  "jsnext:main": "./dist/moment.js",
  "jspm": {
    "files": [
      "moment.js",
      "moment.d.ts",
      "locale"
    ],
    "map": {
      "moment": "./moment"
    },
    "buildConfig": {
      "uglify": true
    }
  },
  "keywords": [
    "moment",
    "date",
    "time",
    "parse",
    "format",
    "validate",
    "i18n",
    "l10n",
    "ender"
  ],
  "license": "MIT",
  "main": "./moment.js",
  "name": "moment",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/moment/moment.git"
  },
  "scripts": {
    "coverage": "nyc npm test && nyc report",
    "coveralls": "nyc npm test && nyc report --reporter=text-lcov | coveralls",
    "eslint": "eslint Gruntfile.js tasks src",
    "prettier-check": "prettier --check Gruntfile.js tasks src",
    "prettier-fmt": "prettier --write Gruntfile.js tasks src",
    "test": "grunt test",
    "ts3.1-typescript-test": "cross-env node_modules/typescript3/bin/tsc --project ts3.1-typing-tests",
    "typescript-test": "cross-env node_modules/typescript/bin/tsc --project typing-tests"
  },
  "spm": {
    "main": "moment.js",
    "output": [
      "locale/*.js"
    ]
  },
  "typesVersions": {
    ">=3.1": {
      "*": [
        "ts3.1-typings/*"
      ]
    }
  },
  "typings": "./moment.d.ts",
  "version": "2.27.0"
}

[MinusFour]

@Alin13 Yeah your package.json seems fine.

Right now there seems to be an issue with ES6 module builds and moment. Bundlers use module and js:next as the point of entry of ES6 module builds (and apparently js:next is being deprecated). moment uses moment/dist for ES6 builds. So if you use:

import moment from 'moment'

It will map that to moment/dist.

However, it seems to be that bundlers aren't mapping other entries from moment into moment/dist. I would have expect moment/locale to expand to moment/dist/locale but it doesn't and since it doesn't you might end up with multiple moment builds since locale modules require moment at different paths (different modules). The explanation I found here.

If your code doesn't show any errors then it might just be that you have multiple copies of it. An easy check could be with: webpack --display-modules option. That should print all the modules included in the bundle. If there's both ./node_modules/moment/moment.js and ./node_modules/moment/dist/moment.js in your build then there might be a problem. You can also use the webpack-bundle-analyzer suggested in the discussion linked.

If you are indeed using ./node_modules/moment/dist/moment.js then you can import the locales under moment/dist (like the message suggested).

As for rollup I have no idea, i think it's likely that it suffers from the same problems. Although I can't understand why js:next would have ever worked in the first place if ultimately both modules never expanded to the same moment module.

[AThiyagarajan]

I am also using it with stencil build. It does not throw any error during stencil build, but the locales are not loaded.
only en locale is loaded.

moment.locales() is called,
`["en"] is returned

[MinusFour]

I was looking at @stencil/core which uses rollup and came across this:

https://github.com/ionic-team/stencil/blob/master/src/compiler/bundle/bundle-output.ts#L38

That probably means that unless the configuration overrides the mainFields property, stencil is looking at jsnext:main to load up the module. Like I said, you should probably inspect your bundles and see if you have moment bundled up twice.

If it's really using jsnext:main you should be using the locale under dist for now:

import moment from 'moment';
import 'moment/dist/locale/de-at';

console.log(moment.localess()) //should print ['en', 'de-at'];

[jrief]

@MinusFour That worked – great, you saved my day!

[AThiyagarajan]

I was looking at @stencil/core which uses rollup and came across this:

https://github.com/ionic-team/stencil/blob/master/src/compiler/bundle/bundle-output.ts#L38

That probably means that unless the configuration overrides the mainFields property, stencil is looking at jsnext:main to load up the module. Like I said, you should probably inspect your bundles and see if you have moment bundled up twice.

If it's really using jsnext:main you should be using the locale under dist for now:

import moment from 'moment';
import 'moment/dist/locale/de-at';

console.log(moment.localess()) //should print ['en', 'de-at'];

In my case I wanted to load all the locales upfront.
How can I do that?

Right now I'm importing like import moment from "moment/min/moment-with-locales"

[marwahaha]

@AThiyagarajan you might find your issue on StackOverflow.

Thanks to @MinusFour who gave a solution.