Uncaught TypeError: moment.locale is not a function

[felipeloha]

Hello,

I have a react application served by nginx and im getting following error:

twix.js:630 Uncaught TypeError: moment.locale is not a function
    at makeTwix (twix.js:630)
    at Object.eval (twix.js:666)
    at Object.eval (twix.js:682)
    at eval (twix.js:684)
    at Object../node_modules/twix/dist/twix.js (main-c4c32c697fee679fc096.js:21351)
    at __webpack_require__ (main-c4c32c697fee679fc096.js:20)
    at eval (PeriodFilter.jsx:18)
    at Module../app/components/PeriodFilter/PeriodFilter.jsx (main-c4c32c697fee679fc096.js:4307)
    at __webpack_require__ (main-c4c32c697fee679fc096.js:20)
    at eval (index.js:2)

the application runs locally without problems but when I deploy it to the server on nginx it doesnt work. any idea what it could be?

thanks in advance

dependencies:

"devDependencies": {
        "@babel/core": "^7.8.4",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/plugin-proposal-decorators": "^7.0.0",
        "@babel/plugin-proposal-do-expressions": "^7.0.0",
        "@babel/plugin-proposal-export-default-from": "^7.0.0",
        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
        "@babel/plugin-proposal-function-bind": "^7.0.0",
        "@babel/plugin-proposal-function-sent": "^7.0.0",
        "@babel/plugin-proposal-json-strings": "^7.0.0",
        "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
        "@babel/plugin-proposal-numeric-separator": "^7.0.0",
        "@babel/plugin-proposal-optional-chaining": "^7.0.0",
        "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
        "@babel/plugin-syntax-import-meta": "^7.0.0",
        "@babel/polyfill": "^7.0.0",
        "@babel/preset-env": "^7.8.4",
        "@babel/preset-react": "^7.0.0",
        "@babel/preset-typescript": "^7.8.3",
        "auto-changelog": "*",
        "autoprefixer": "^7.1.6",
        "babel-core": "^7.0.0-bridge.0",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.5",
        "babel-plugin-add-module-exports": "^1.0.2",
        "cheerio": "^0.22.0",
        "css-loader": "^0.28.7",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^15.0.1",
        "eslint-import-resolver-webpack": "^0.8.1",
        "eslint-loader": "^1.8.0",
        "eslint-plugin-import": "^2.20.0",
        "eslint-plugin-jsx-a11y": "^5.0.3",
        "eslint-plugin-react": "^7.18.0",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "html-loader": "^0.5.1",
        "html-webpack-plugin": "^3.2.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^25.1.0",
        "jest-junit": "^10.0.0",
        "jest-transform-stub": "^2.0.0",
        "node-sass": "^4.13.1",
        "postcss-loader": "^3.0.0",
        "react-transform-hmr": "^1.0.4",
        "redux-mock-store": "^1.2.3",
        "sass-loader": "^7.3.1",
        "style-loader": "^0.19.0",
        "typescript": "^2.7.2",
        "ts-loader": "^4.1.0",
        "url-loader": "^0.6.2",
        "webpack": "^4.15.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.0.8"
    },
    "dependencies": {
        "@types/react": "^16.9.19",
        "axios": "^0.19.2",
        "classnames": "^2.2.6",
        "immutable": "^3.8.2",
        "isomorphic-fetch": "^2.2.1",
        "js-cookie": "^2.2.1",
        "keymirror": "^0.1.1",
        "lodash": "^4.17.15",
        "modules-values-extract": "^1.0.3",
        "moment": "^2.24.0",
        "normalize.css": "^8.0.1",
        "postcss-cssnext": "^3.1.0",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-barcode": "^1.4.0",
        "react-date-range": "^0.9.4",
        "react-dom": "^16.12.0",
        "react-hot-loader": "^4.12.19",
        "react-immutable-proptypes": "^2.1.0",
        "react-intl": "^2.9.0",
        "react-notifications": "^1.4.3",
        "react-prefixr": "^0.1.0",
        "react-redux": "^5.1.2",
        "react-router": "^3.2.5",
        "react-router-redux": "^4.0.8",
        "react-to-print": "^2.5.1",
        "react-toolbox": "2.0.0-beta.12",
        "react-toolbox-themr": "^1.0.2",
        "react-tooltip": "^3.11.2",
        "react-transition-group": "^2.9.0",
        "redux": "^3.7.2",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.3.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "unstated": "^2.1.1",
        "urijs": "^1.19.2",
        "xml-loader": "^1.2.1"
    }

[JohJohan]

I got the same problem but then with plugin https://github.com/Eonasdan/bootstrap-datetimepicker i'm running momentjs version 2.25.2

The error:

bootstrap-datetimepicker.js:2458 Uncaught TypeError: moment.locale is not a function
    at Object.<anonymous> (bootstrap-datetimepicker.js:2458)
    at bootstrap-datetimepicker.js:40
    at Object../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js (bootstrap-datetimepicker.js:53)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (page-account-edit.js:3)
    at Object../assets/js/page-account-edit.js (page-account-edit.1f12d24e.js:456)
    at __webpack_require__ (bootstrap:19)
    at Object.39 (module.js:22)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83

[felipeloha]

i solved by downgrading the fix version to 2.24.0 "moment": "2.24.0",

[marwahaha]

Does it still work with 2.25.3 ?

[marwahaha]

@felipeloha ?

[marwahaha]

I will close for now. Please re-open in https://github.com/moment/moment if you are still experiencing issues. It is similar to some issues like https://github.com/moment/moment/issues/5507 .

Best of luck!

[Anubarak]

Just in case someone comes here with Vite: an older version of PHPStorm imported moment like

import * as moment from 'moment';

this works for webpack and the development process but Vite will the error above in bundled JS builds because "moment()" returns undefined in that case

So in case you are using Vite, always import moment with

import moment from 'moment';