moment with locales: "./locale" not found

See #1435. Workaround at the end. Thanks.

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

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

did not work

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.

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

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.

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.

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$/)

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

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$/)
    ]

@miguelrincon works fine!

Awesome. It works!

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

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

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!

https://github.com/afc163/react-boilerplate/commit/61ec8a19df0fcb56d407b795cb6c87141e0e14a7

\\ webpack.js

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

This problem has appeared for me in moment.js 2.19.0. If you need to get your application working right now a rollback should do it. For example:

npm install [email protected] --save

Thank you @jeff3dx This fixed my issue!

@jeff3dx I had exactly the same happening with the latest version, but adding the resolve alias as suggested by @M1chaelTran still does the trick.

I confirm that sticking to 2.18 fixes the issue immediately.

Same here. Using React 16, installed moment 2.19 and got errors. Reverted back to 2.18, no errors.

dear, I solve it!
src/lib/locale/locales.js in line 61,
61 require('./locale/' + name);
change to be:
61 require('./' + name);
"moment with locales: "./locale" not found" will be solve.

@wushuang5112 you cant edit a node_module , so your solution would required to add moment in to the repository , which is not good

We also just had a problem when upgrading to moment 2.19 in an app also using react and webpack. Reverting to 2.18 fixed it.

Instead of just rolling back I would use @M1chaelTran 's solution of using an alias for momentjs inside of webpack config. Worked like a charm and allows me to keep using latest.

solved! ...v2.19.1

@M1chaelTran man you are a blessing, thank you so much!!!

I'm still seeing the issue in v2.19.1

WARNING in ./~/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '/project/node_modules/moment/src/lib/locale'
 @ ./~/moment/src/lib/locale/locales.js 56:12-46
 @ ./~/moment/src/lib/locale/locale.js
 @ ./~/moment/src/moment.js
 @ dll reactBoilerplateDeps

However, @M1chaelTran alias trick did work for me.

@electrobabe I think that problem is ... the doc is outdated about this. so...

To solve this: Can't resolve './locale' in, try to import moment and min/locales instead moment-with-locales. It's fixed to me!

The better reference for this is:
http://momentjs.com/docs/#/i18n/loading-into-browser/

Downgrading to 2.18 does not solve the issue for me. Still have this : Error: Cannot find module "./locale"

The strange thing is that to fix this:

• in my react-native project I have to import moment-with-locales file
• in my reactjs project I just have to import moment/locales file

@manelephant I think this solve the problem: https://github.com/moment/moment/issues/2979#issuecomment-346636284

Downgrading to 2.18 does not solve the issue for me.

i use angular cli.
moment worked but when i want export my component with npm run packagr ==>

Compiling to FESM15
'locale' is not exported by 'node_modulesmoment\srcmoment.js'

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

somebody can help me ?

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

Thanks for all information.

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_modulesmoment\srcmoment.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\angulartestnode_modules\modulename

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.

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'
        }
    }
});

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

        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.

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

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

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

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.

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',.

Here is the fix for this issue:

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

Alexandra

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';

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

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

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

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

@mssui 's solution worked for me

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

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

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

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