New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add usage instructions with webpack #1435
Comments
I've never used Webpack, so I'm unsure what those instructions would be. Were you able to figure it out? If so, we could add your instructions. |
Thanks for the reply. Not yet, but I'll keep you posted. |
The language files are looking for a module if (typeof define === 'function' && define.amd) {
define(['moment'], factory); // AMD
@fernandoacorreia Your folder is named @icambron Why not It would be better when the order of CommonJs and AMD is consistent in the lang files and the moment.js file. By default webpack includes all languages because of this statement new webpack.ContextReplacementPlugin(/moment[\\\/]lang$/, /^\.\/(en-gb|de|pl)$/) |
@sokra Thanks for explaining about the inconsistency in the module definitions. @icambron can you take a look at these suggestions? By the way, the directory is named
I'm declaring the pathname when requiring, like |
hmm ok... it works if you use the node.js instructions. |
@sokra That helps. Thanks a lot for debugging this. Although I don't want to install it via npm; I'm installing all my frontend dependencies via bower and I only search for modules in @icambron To update the instructions to make it compatible with webpack (and, presumably, other module loaders), in the docs change this line:
to:
|
The npm instructions worked for me, but not |
@Sigfried What does your
My
I'm requiring moment as:
I'm using a standard Yeoman directory structure. |
That did it for me. Thanks! |
Now you can use bower install --save moment |
@ichernev That sounds good. In this case, I believe that updating the Where to use it documentation would resolve this issue. |
Bit late on this, but now one can use the provide plugin
|
As @sokra suggested, I have added the following plugin in order to require only the necessary locale. Also notice that plugins: [
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ko|ja|zh-cn)$/)
] |
Added doc item as moment/momentjs.com#269. Will track there. |
I'm using es6, typescript, and very tight tslint rules. This is what I ended up doing to get moment into the project: import "expose?moment!imports?this=>window&exports=>false&define=>false!exports?window.moment!moment"; |
I just created an empty 'locale' folder in the same folder as 'moment.min.js', so that it includes all of the js files in that folder. It's a hack but it works. |
To load languages in Webpack lazy / dynamically you can use with Step 1 - in webpack configuration: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // to not to load all locales Step 2 - in the client code: require('bundle!moment/locale/' + locale + '.js')(function () {
moment().locale(locale).format('lll');
// note that now you can use the locale even outside of this callback
}); |
In my case (webpack + I removed the
Everything works perfectly, no warnings, and only the locales I import explicitly are included in the build (even without using the |
@micheleb the actual cause for looking in that subfolder is the incorrect setting of
This can be worked around by aliasing EDIT: Alternatively, a use of the new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
if (!/\/moment\//.test(context.context)) { return }
// context needs to be modified in place
Object.assign(context, {
// include only CJK
regExp: /^\.\/(ja|ko|zh)/,
// point to the locale data folder relative to moment's src/lib/locale
request: '../../locale'
})
}), This probably could be written without using the callback, but I wanted to be "more sure" that this would only apply to a Make sure the @sokra what happens if |
was this fixed? if not, should it be re-opened? |
Why was this closed? This is still an occurring issue. |
"I believe that updating the documentation would resolve this issue." "Added doc item as moment/momentjs.com#269. Will track there." So, the issue was closed here because it's been superseded by an issue in Moment's documentation website. We'd love for someone to write a PR there to resolve moment/momentjs.com#269. |
This fix worked for me:
For reference: |
Is it possible to not includes all the locale without adding configurations to webpack? I'm using create-react-app and I don't have the ability to edit the webpack config file. I search everywhere and it always seems to come back to adding a config line in webpack. |
Agreed, I think requiring the locales should be explicit only, never implicit. It's so obvious according to the number of issues raised here in moment, in webpack, in bower, npm, and the time spent by everyone to circumvent it since several years. |
I installed npm packs, but when I do import moment from 'moment-timezone'; moment is always undefined. How that? |
I am having this same problem using Angular 2 CLI project. Has anyone found a working solution yet? |
Looking for clues for an Angular CLI project too |
Any clues for Angular CLI ? |
As you can see I asked 4 months ago about the CLI and no answers, our solution was to simply replace moment with date-fns, and since we are also using chartjs in our project and it has a moment dependency we are in the process of replacing that too. |
quite nice solution |
How can this be solved for Angular CLI without ejecting the Webpack config? |
Add to the section Where to use it instructions for properly integrating Moment.js with webpack.
require('momentjs/moment.js')
causes several errors like this:require ('momentjs/min/moment-with-langs.js')
causes this warning:The text was updated successfully, but these errors were encountered: