Webpack 5 Support

Describe the bug I get a parser error when attempting to run a build with webpack 5

To Reproduce Running a build returns with the following error.

****/src/locale/fr-CA/messages.json
Module parse failed: Abstract method Parser.parse. Must be overridden.
File was processed with these loaders:
 * ./loaders/lingui.js

Expected behavior The build would pass.

Additional context I’m using the @latest version of lingui and babel 7.10 with “@lingui/macro”: “2.8.3”

I have tried implementing the following mentioned on this git issue but had other parsing errors.

https://github.com/webpack/webpack/issues/7057

[semoal]

@marswong @colinaaa give it a try to 3.8.10, I’ve released a fix. I’ve tried with our next-js example which uses webpack 5 under the hook and worked nice

[semoal]

get in trouble again:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait  - compiling...
error - ./locales/en/messages.po
Error: Could not retrieve module factory for type LoaderDependency

dependencies:

{
  "dependencies": {
    "@lingui/core": "3.8.3",
    "@lingui/detect-locale": "3.8.3",
    "@lingui/macro": "3.8.3",
    "@lingui/react": "3.8.3",
    "make-plural": "6.2.2",
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.13.14",
    "@lingui/cli": "3.8.3",
    "@lingui/loader": "3.8.3",
    "babel-plugin-macros": "3.0.1",
    "webpack": "5.30.0"
  }
}

next.config.js:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.po/,
      use: [
        {
          loader: '@lingui/loader',
        },
      ],
    })
    return config
  },
}

Let me create a reproducible repo and we’ll fix the issue asap 😃