Sample Setup about react-i18nliner

[jenseng]

Sure, I'll throw something together later today or tomorrow. I'm using react-i18nliner in a project (not open source), so I know it can be done ;)

What sort of problems are you running into? If there are errors in the README we should fix those too.

[Celestz]

Thanks for reply, we're currently using webpack and when I tried to follow the instructions I got a lot of errors on my end. If you can scaffold a sample based on that, that would be swell.

[jenseng]

There are still a few rough edges (see TODOs in sample app), but there should be enough there to adapt it to pretty much any webpack setup. Let me know if you run into issues.

The most relevant files to look at are probably:

• .i18nrc ... this makes sure the i18nliner bin runs with the react-i18nliner plugin
• webpack.config.js ... note that the react-i18nliner loader needs to run before jsx-loader (or babel-loader)
• i18nliner-glue.js ... some necessary glue code to get i18nliner hooked into i18n-js, and to get the translations into the webpack bundle

Also note that anywhere you use translate="yes", you need I18n in scope due to how it gets preprocessed... In the example app I require it everywhere, though in the prod app where I'm using react-i18nliner I just stick I18n on window

[Celestz]

Hello, just a heads up on my end, webpack build is failing on my end.
For some reason the dependencies are not finding some core node modules(fs for example):

WARNING in ./~/i18nliner/dist/lib/i18nliner.js
Critical dependencies:
45:6-25 the request of a dependency is an expression
 @ ./~/i18nliner/dist/lib/i18nliner.js 45:6-25

ERROR in ./~/i18nliner/dist/lib/i18nliner.js
Module not found: Error: Cannot resolve module 'fs' in c:\Users\Patrick\Documents\ws\adshore\react-i18nliner\examples\webpack\node_modules\i18nliner\dist\lib
 @ ./~/i18nliner/dist/lib/i18nliner.js 7:15-28 28:15-28

ERROR in ./~/i18nliner/dist/lib/commands/export.js
Module not found: Error: Cannot resolve module 'fs' in c:\Users\Patrick\Documents\ws\adshore\react-i18nliner\examples\webpack\node_modules\i18nliner\dist\lib\commands
 @ ./~/i18nliner/dist/lib/commands/export.js 5:25-38

ERROR in ./~/i18nliner/dist/lib/processors/js_processor.js
Module not found: Error: Cannot resolve module 'fs' in c:\Users\Patrick\Documents\ws\adshore\react-i18nliner\examples\webpack\node_modules\i18nliner\dist\lib\processors
 @ ./~/i18nliner/dist/lib/processors/js_processor.js 5:25-38

ERROR in ./~/i18nliner/~/mkdirp/index.js
Module not found: Error: Cannot resolve module 'fs' in c:\Users\Patrick\Documents\ws\adshore\react-i18nliner\examples\webpack\node_modules\i18nliner\node_modules\mkdirp
 @ ./~/i18nliner/~/mkdirp/index.js 2:9-22

ERROR in ./~/i18nliner/~/recast/main.js
Module not found: Error: Cannot resolve module 'fs' in c:\Users\Patrick\Documents\ws\adshore\react-i18nliner\examples\webpack\node_modules\i18nliner\node_modules\recast
 @ ./~/i18nliner/~/recast/main.js 18:4-17

ERROR in ./~/i18nliner/~/gglobby/dist/lib/globject.js
Module not found: Error: Cannot resolve module 'fs' in c:\Users\Patrick\Documents\ws\adshore\react-i18nliner\examples\webpack\node_modules\i18nliner\node_modules\gglobby\dist\lib
 @ ./~/i18nliner/~/gglobby/dist/lib/globject.js 5:25-38

[Celestz]

Found a fix here and got it working, thanks 👍
pugjs/pug-loader#8

PR if interested: #17

[jenseng]

It's odd that webpack is trying to load all that stuff in... that's why I added this section to the config. When webpack can't resolve requires, it errs on the side of caution and requires the whole directory, which is why it you're seeing it get commands/export, processors/js_processor, and a ton of i18nliner dependencies (recast, gglobby, etc) that aren't actually needed at runtime.

When you ran into the issues above, did your webpack.config.js have that noParse section? Or was there anything different about how you were running the sample app? Ideally I'd like to track that down, because node: { fs: 'empty' }, feels like a bit of a band-aid ... if you're having to do that, your bundle is probably including a lot things you don't really need, bloating the size of the bundle.

[Celestz]

noParse section was added just to allude to the err above, but as you said it's probably a band aid solution as of the moment.

[jenseng]

ooh I bet it's a path thing (backslashes instead of forward) ... so the noParse probably does no good in its current form (which is why you need the node: { fs: 'empty' } too)

I've just about got a fix ready that simplifies webpack.config.js ... noParse gets moved into the loader itself. I'll tweak it to do a platform-appropriate regex, then your PR shouldn't need that node: { fs: 'empty' } bit anymore.