@lingui/loader compatibility issue with webpack 4

[chochihim]

Describe the bug
Inline loader usage described in https://lingui.js.org/guides/dynamic-loading-catalogs.html#loading-of-message-catalogs does not work with webpack 4 as webpack now handles JSON file natively. Please refer to discussion and workaround in webpack/webpack#6572

Maybe we need to update the doc?

[tricoder42]

Hey @chochihim, you're right. I noticed that while ago but didn't have time to update docs... Do you think that hack is stable enough to include it in loader? Or should be simply encourage using loader in webpack config? That isn't possible for create-react-app users...

[chochihim]

I am working on a next.js project so I am now using loader in webpack config without problem.

If need to cater for CRA users, I think hack into webpack is the only way. Asking users to eject only for using one lib will scare them away. webpack documents about the hacky _module from their loader API section. I think it should be somehow stable to use.

[JSteunou]

2 solutions

• doc can be updated with chained loader @lingui/loader!json-loader!./locale/messages.json
• lingui loader can be modified to works out of the box. It already works alone for po format without the need of other loaders.

[tricoder42]

Exactly, the only problem is .json extension. Let's add the hack to loader.

I'm also thinking about simpler API: @lingui/loader!{language} or @lingui/loader!{language}/messages. The path to message catalog can be derived from lingui config which loader has access to. What's your opinion on this? Only problem is that this would work only with inline loader...

[JSteunou]

not a big fan of black magic. Explicit import is good and let people add webpack rules by extensions / name / path if wanted.

[tricoder42]

doc can be updated with chained loader @lingui/loader!json-loader!./locale/messages.json

Actually we need it other way round, sth like @lingui/loader!js-loader, but I don't think such loader exists... Anyway, it's fixed for now. I'll take a look at webpack if I can figure out how to add a public API as described here webpack/webpack#7057 (comment)

Thanks for reporting and additional info!

[tricoder42]

Released in v2.6.0

[MartijnHols]

In case anyone else also still runs into this issue; the fix in 2.6 requires having installed Webpack in the master package.json: f804335#diff-6ea2b5f87043b896e6d577d1ad88022bR10