moment with locales: "./locale" not found

[electrobabe]

I'm getting this warning when using webpack:

WARNING in ./~/moment/min/moment-with-locales.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./locale in \node_modules\moment\min
@ ./~/moment/min/moment-with-locales.js 271:16-43

any clues?

[mattjohnsonpint]

See #1435. Workaround at the end. Thanks.

[electrobabe]

the suggested workaround in "plugins" of webpack.config.js

new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|de|cz|eu)$/)

did not work

[mheimschild]

The problem mentioned above is about require('./locale' + name) statement included in the file min/moment-with-locales.js. It is not necessary anymore because all locales are already included in this file itself.

Unfortunately webpack tries to resolve all require statements - therefore this warning.

[mattjohnsonpint]

@ichernev - I don't use webpack, but it seems like the point @mheimschild makes is reasonable. Not sure how to handle it though.

[mheimschild]

The simplest solution how to convince webpack not to look for locales already included in the moment-with-locales.js is to force him to load something else instead. This worked for me:

install empty module (it literary contains nothing)
npm install --save-dev empty-module
and then configure ContextReplacementPlugin as follows
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/)

Hopefully this helps.

[kahboom]

Thank you for the workaround @mheimschild - It would have been nice to have had this resolved already in Webpack 2, even if the empty module would be included as a dev dependency automatically.

[JounQin]

It seems no need to use empty-module, just change it to null, it still works in ContextReplacementPlugin

new webpack.ContextReplacementPlugin(/\.\/locale$/, null, false, /js$/)

[iqbalmineraltown]

just had similar problem when using momentjs via npm
I found that on locales.js it refers to ./locale/
I assume that line trying to find language localization. CMIIW

Meanwhile the locale files are located on ../../locale/ from locale.js
by changing that line into require ('../../locale/' + name); I resolved the issue but I couldn't edit node_modules directly like this on my server

will try webpack way mentioned above later

EDIT: I was running this on windows, it looks like path problem. I tried running moment on linux and it works just fine

[miguelrincon]

I used the ignore module with good results. This might help someone:

    // /app/js/webpack.config.js
    plugins: [
        
        // Fixes warning in moment-with-locales.min.js 
        //   Module not found: Error: Can't resolve './locale' in ...
        new webpack.IgnorePlugin(/\.\/locale$/)
    ]

[xiguaaxigua]

@miguelrincon works fine!

[newcaiosantos]

Awesome. It works!

[maggiepint]

@miguelrincon or similar - can we get a pull request on docs for that? It would be in the use section under webpack.

[wethinkagile]

How To Fix in Hybrid Apps Ionic 3.5 with Angular 4 where we have no webpack.config file?

[M1chaelTran]

I tried @miguelrincon suggestion above but it doesn't work.
i.e. It doesn't throw the error during the build, but the same error is thrown in the browser console log.

After looking around, I found this and it works perfectly!

afc163/react-boilerplate@61ec8a1

\\ webpack.js

resolve: {
   ....
   alias: {
      moment$: 'moment/moment.js',
   },
   ...
}

[marwahaha]

It seems like there's a lot of useful advice in this thread. We'd love to take some PRs on our docs about this! https://github.com/moment/momentjs.com

[it-devros]

Thanks for all information.

[ugurkoysuren]

UPDATE: I found a solution.

The right way to import :

import * as moment_ from 'moment'; const moment = moment_;

and in ng-package.json:

{ "lib": { "externals": { "moment": "moment" } } }

By me was the structure false, the externals was not inside lib, so packgr was looking for lib.externals and couldn't find moment.

Ng-packgr & moment

I'm using the latest version, right now it's 2.22.2.

While I'm trying to use ng-packagr and pack my project, I get this error. Same as : @vZanchiV

'locale' is not exported by 'node_modules\moment\src\moment.js'

BUILD ERROR
Cannot call a namespace ('moment')
Error: Cannot call a namespace ('moment')

In project it's importer in this way :

import * as moment from 'moment';

I found a workaround that didn't went well, I tried importing it like :

import * as momentImported from 'moment'; const moment = momentImported;

After this method I could export my project with ng-packagr but then I failed importing my project in another project, with this problem

Module not found: Error: Can't resolve './locale' in 'C:\development\angularTest\angulartest\node_modules\modulename

[piltsen]

To confirm @francisrod01 's solution, I have changed my import, so that instead of

import moment from 'moment/min/moment-with-locales'

I changed to

import moment from 'moment'
import 'moment/min/locales'

And this solved for me. Hope it helps.

[anaxamaxan]

I found the alias solution posted above by @M1chaelTran to work well. In case someone using Laravel Mix is wondering how to apply it, your webpack.mix.js should look similar to this at the top:

let mix = require('laravel-mix');

mix.webpackConfig({
    resolve: {
        alias: {
            moment$: 'moment/moment.js'
        }
    }
});

[withzhaoyu]

try all solution above, only the 'downgrade moment version' can resolve.But some of my module like 'antd' is require 2.19.0. so I think i can`t downgrade it

[aaronkrohn]

        new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
            if (!/\/moment\//.test(context.context)) return;

            Object.assign(context, {
                regExp: /^\.\/\w+/,
                request: '../../locale', // resolved relatively
            });
        }),

This solution worked for me.

[jamesdh]

Appears to be the same issue as #4216 (and #3872 to boot).

Probably best to refer to #4216 since that has the largest history

[vladthelittleone]

@aaronkrohn thanks, this solution work with react-boilerplate v.4

[parisudhaandireyaa]

Try to load locale first instead of moment.min.js.

"moment": [
"../node_modules/moment/locale/en-au.js",
"../node_modules/moment/min/moment.min.js"
]

this will solve my issue.

[yqbk]

I have moment 2.24.0 and this worked for me finally:

    // Fixes warning in moment-with-locales.min.js
    //   Module not found: Error: Can't resolve './locale' in ..
    new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
      if (!/\/moment\//.test(context.context)) return

      Object.assign(context, {
        regExp: /^\.\/\w+/,
        request: '../locale', // resolved relatively
      })
    })

Almost the same as fix of @aaronkrohn , but instead of request: '../../locale', I had to use request: '../locale',.

[alexandra-grigore]

Here is the fix for this issue:

File: "moment\src\lib\locale\locales.js " line 56:
"./locale" needs to be changed to "../../locale"

Alexandra

[un33k]

The fix is simple ...

find any thing like this:

import moment from 'moment/src/moment';

and replace it with this

import * as moment from 'moment';

[mssui]

With create-react-app, below import worked fine for me

import * as moment from "moment/moment.js"

[mtaylor769]

With create-react-app, below import worked fine for me

import * as moment from "moment/moment.js"

@mssui 's solution worked for me

[jungor]

 "resolutions": {
    "moment": "2.24.0"
  }

add above to package.json and re yarn. ok for me

[snabbat]

webpack.config.js

please where can I find this file, I can't find the path you referenced to, Thank in advance,

I did a workaround by copying the moment source folder from an older project, and it worked for me

[marwahaha]

See https://momentjs.com/docs/#/-project-status/