使用 Moment JS 创建 React-App：找不到模块“./locale”

Question

Just ran an npm update on my web application and now Moment JS appears to be failing with the following message:

Error: Cannot find module "./locale"
\node_modules\moment\src\lib\moment\prototype.js:1
> 1 | import { Moment } from './constructor';

Not sure what version of Moment JS I had prior to my update, but my application has been working for months.

I created another react app and ran an npm install moment --save and modified the source to display the time and ended up with the same error described above.

Not sure if there is a fail-proof way to integrate Moment JS using Create-React-App currently short of ejecting to manage the webpack settings myself, but I really don't want to do this. Anyone else seeing these issues or having success? If so, a short write up would go along way to helping out.

Answer 1

Appears this has already been identified as an issue for Moment JS version 2.19. If you have upgraded to 2.19 run npm install moment@2.18.1 to revert back to previous version until it is fixed!

See thread: https://github.com/moment/moment/issues/4216

Answer 2

Application built with Create React App and using Moment 2.24.0, the following seems to be working fine:

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

Instead of importing moment-with-locales directly. Alternatively, also possible to only import required locales:

import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/ru';

Answer 3

The answer above, though I have no doubt works for some, does not work for me. The solution I found is fairly quick and easy, but is a little more complicated than simple downgrading.

This problem originates as a result of and can be fixed with webpack. So we're going to have to add a few lines of code to our webpack.config.js file. If you don't have one yet, you can add one to the root webpack directory:

YOURAPPNAME/node-modules/webpack/

So now that you're inside your webpack.config.js file, you need to add a few lines of code. Just copy and paste this inside the new file or adapt it to the code you already have in webpack.config.js.

module.exports = {
    resolve: {
        alias: {
            moment$: 'moment/moment.js'
        }
    }
};

Your import statement of moment in your index.js (or otherwise named) file should look like this:

import moment from 'moment'

You should now be able to use moment completely normally. For example:

var tomorrow = moment().add(1, "day")

Answer 4

If you have a fresh install, or upgraded moment to 2.25 and are getting this warning now, try forcing all your packages to use 2.24.

UPDATE: New release 2.25.3 has been reported to fix this problem! Try to first just update.

If you depend on some library that didn't upgrade yet, tell them to upgrade. And in the meantime, if you need 2.25, you can force also your sub-dependencies to use this version.

If you're using yarn add these lines into package.json

    "resolutions": {
        "**/moment": ">=2.25.3"
    },

This is to be added inside packages.json at the top level, ie with the same indentation as "dependencies".