Webpack moment.js integration

19 thoughts on “Webpack moment.js integration”

1. @ichernev thank you so much for reaching out. ❤️❤️❤️❤️

   We would be more than happy to help!!!

   A cool idea 💡 that might be worth investigating is helping you guys create a ‘example’ or ‘test’ fixture of a small use case of webpack and moment together with one or many locales.

   Pros:

   • the fixture can serve as a point of reference for users in regards to implementation
   • you can then run functional/integration smoke tests against this example for your test suite?

   Thoughts?

2. @TheLarkInn hello, thank you for the prompt response.

   I like the fixture idea, we can take example from require.js documentation on our website, which mentions all the different (widely used) use-cases:

   http://momentjs.com/docs/#/use-it/require-js/

   Basically we’ll need examples for:

   • core only (no locales)
   • core with a single locale (known in advance)
   • core with all locales
   • care + dynamically loading locales (if that is applicable to webpack at all)

3. FYI: This problem isn’t specific to moment.js. It would be nice to have a general recommendation how libs, which support multiple locales, should be used together with webpack. Other libs which I think of are https://github.com/andyearnshaw/Intl.js or https://github.com/angular/bower-angular-i18n. They don’t have a require which includes all locales, but all of them need to be handled with some custom logic in some way. It would be nice to generalize the way how locale specific files are loaded.

4. Using create-react-app, we don’t have access to webpack config. And according to the main contributor there, “It’s really not right that a library requires changes in the config”

   Wouldn’t moment/moment#2373 be more appropriate? Or maybe that’s the same thing you’re aiming to do?

   I just don’t feel like playing with webpack config is the way to go to reduce moment’s size in our builds…

5. @tangoabcdelta
   use

    module: {
         noParse: [/moment.js/],
   }
   

6. It seems this issue got sidetracked regarding the proper use of moment with webpack to reduce bundle sizes, specifically within the constraints of create-react-app. Is there a final word on this? I kind of favor the typescript style when it comes to importing locales.

7. Until this is fixed, my solution is to simply avoid including moment in the webpack bundle. Load it as a regular browser script:

   <script defer src="node_modules/moment/min/moment.min.js"></script>
   <script defer src="node_modules/moment/locale/en-gb.js"></script>
   

   Now you have moment in your web app at the cost of two requests and ~60Kb (as oppose to 0 additional requests but ~0.5Mb added to your bundle when using webpack).

8. Guys this has been going on for a while and seems really easy to fix. Currently everyone who uses moment (awesome library btw) is including ALL the languages, which is insane, can we do something about it?

   For now lets say current behavior doesn’t change and those who want to reduce their footprint can do something like this?

   import moment form 'moment/core';
   import 'moment/locales/...';
   

9. I’ve created an example package which will prove my theory: https://github.com/laurenskling/moment-treeshaking

   running production mode will drop the language support.

10. Hey guys, maybe you are looking something like this one

    new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(ru)$/)

    and BundleAnalyzerPlugin result is

    

11. So is this still a problem with webpack2 and should we merge some code in moment to fix this 🙂

12. I resolved this issue in my project in a different way, I have used copy-webpack-plugin to copy all locale files to web root directory where my bundle files are exist.

    following is my webpack config

     
          new CopyWebpackPlugin([
            {
              context: 'node_modules/moment/locale',
              from: '**/*',
              to: './moment-locale/'
            },
            {
              context: 'node_modules/react-intl/locale-data',
              from: '**/*',
              to: './react-intl-locale/',
              ignore: ['index.js']
            }
          ]),
    

    In our application user can select any locale, so we need to load them dynamically. using above solution I can achieve that

    Cheers
    Kishore

13. To the next person trying to get one of the above configurations to work (which they did not for me):

    While trying to fix things, I accidentally stumbled upon the documentation page for the ContextReplacementPlugin showing exact this case (momentjs) as an example and it worked fine for me 🙂

    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
    ]
    

    `

14. How the !@#$!@#$ is this still a problem?

15. Since this doesn’t really have anything to do with webpack at this point I think it’s best to close this issue. If anyone would like to create a guide on webpack.js.org they can submit a PR to GitHub.com/webpack/webpack.js.org

16. Can’t personally vouch for it but have read about Day.Js as an alternative

    ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API

    https://github.com/iamkun/dayjs

    reference: moment/moment#2373 (comment)

Comments are closed.