Problem adding moment locales to a clean 3.4.0

[Augustin82]

React Boilerplate

Issue Type

• Bug

Description

We're experiencing problems importing moment locales in our react-boilerplate project.

The problem is: if we "import 'moment/locale/fr';" then it's as if the locale is not loaded, and moment stays in English.

If we "import 'moment/src/locale/fr';" then the locale is loaded, we can use a localized moment, but then the tests fail: Jest tells us "Unexpected token import" when trying to parse 'moment/src/locae/fr' (which is indeed written using ES6 module syntax).

I have worked around that by using a custom "transformIgnorePatterns" including the moment module, but I'm wondering why the locale is not loaded when using the "normal" import.

For reference, the same code works fine with a fresh Create-React-App project.

Steps to reproduce

The demo repo is available there: https://github.com/Augustin82/moment-bug-boilerplate

Once cloned, just alternate between the two ways of importing the moment locale in app/App/index.js. Then, display the page. In one case, the console should show an i18n'ed locale (but Jest will complain), and in the other the console will show the default 'en' locale, but tests will pass without a problem.

Versions

• React-Boilerplate (see package.json): 3.4.0
• Node/NPM: node 7.4.0 / npm 4.0.5
• Browser: latest Chrome

[christophertrudel]

I am also trying to properly use moment.js and notice the issues are with how it is imported.

I have pieced together a temporary solution from these two issue, 1 and 2. This works for now and only imports moment.js without any locales except en. You can further tell it to import other locales by default or use an import statement within the codebase.

I would like to first state that having the Moment library built into main.js is probably undesirable. I think if I understand it's use correctly it is probably better to be built into reactBoilerplateDeps.dll.js.

Quick solution (hacky):
In react-boilerplate/node_modules/momentpackage.json simply change
"jsnext:main": "./src/moment.js", to "jsnext:main": "./moment.js",

In react-boilerplate/internals/webpack/webpack.base.babel.js add the second line under the first

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

This line is where you can configure what locales to include or you can stick with just en and use import statements within app.js like so

import 'moment/locale/fr-ca';

Disclaimer this is clearly a temporary hack until we can find a more viable solution. Thought it might help any one continue you development until that solution is found.

[chris-garrett]

I remember running into this issue and I had to simply change the order of main/jsnext:main in internals/webpack/webpack.base.babel.js

From:

mainFields: [
  'browser',
  'jsnext:main',
  'main',
],

To

mainFields: [
  'browser',
  'main',
  'jsnext:main',
],

I can't find the source issue where this was described in order to give credit.

[christophertrudel]

I submitted a PR to moment-bug-boilerplate

This will solve the issues and properly build the moment library into reactBoilerplateDeps.dll.js

I think this issue can be closed now.

[Augustin82]

Thanks for taking the time to comment, explore, and submit a PR, it's great =)

However, I don't think it's right: when changing the webpack config file, you are actually telling it to never use the "jsnext:main" entry if it finds a "main" one. So, basically, you're forcing the ES5 "require" version instead of using the ES6 "import" one.

While this may work for you and others, it does not address the specific problem with moment (since it's the only library that I know of that behaves this way with react-boilerplate), and it means that the entire project is now using the ES5 version of modules.

Unless, of course, I'm missing something: after all, I'm by no means an expert webpack user (nor, in fact, even an "advanced" one ;)).

[christophertrudel]

Totally agree, the swapping of the order is probably something we don't want to do project wide.

For now, seeing that this seems to be an issue that needs to be supported within the moment.js library, instead of changing the webpack mainFields you can just do like I suggested above.

In react-boilerplate/node_modules/moment/package.json simply change
"jsnext:main": "./src/moment.js", to "jsnext:main": "./moment.js",

It is not nice but it gets you moving along until the real problem is resolved.

[oomathias]

Adding the following alias inside internals/webpack/webpack.base.babel.js resolve: {} solve the problem for me. And I can keep jsnext:main before main in mainFields: [] which should be the default behavior.

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

[gretzky]

Closing due to inactivity

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.