lingui/loader with JSON file parse error

Describe the bug Hi, I actually work with NextJS and I need to implement an i18n. I decided to use lingui over other lib but I encounter and error when I try to use lingui/loader to dynamically load and compile my .json file I got errors: when

warn  - ./src/locale/en/messages.json (./node_modules/@lingui/loader!./src/locale/en/messages.json)
Module parse failed: Unexpected token / in JSON at position 0 while parsing near '/*eslint-disable*/mo...'
File was processed with these loaders:
 * ./node_modules/@lingui/loader/index.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token / in JSON at position 0 while parsing near '/*eslint-disable*/mo...'
    at JSON.parse (<anonymous>)

But if I change my configuration to default ( .po files ) and change my import to import .po file everything works perfectly.

To Reproduce Steps to reproduce the behavior, possibly with minimal code sample, e.g:

_app.js

import { I18nProvider } from "@lingui/react";
import { i18n } from '@lingui/core';
import { useEffect } from 'react';

async function dynamicActivate(locale) {
  const { messages } = await import(`@lingui/loader!./../src/locale/${locale}/messages.json`)
  i18n.load(locale, messages)
  i18n.activate(locale)
}

function MyApp({ Component, pageProps }) {
  const { locale } = pageProps;

  useEffect(async () => {
    if (locale) {
      await dynamicActivate(locale);
    }
  }, [])

  return (
    <I18nProvider i18n={i18n}>
        <Component {...pageProps} />
    </I18nProvider>
  )
}

lingui.config.js

const defaultNextConfig = require('./next.config');

module.exports = {
  "locales": defaultNextConfig.i18n.locales,
  "fallbackLocales": {
    default: defaultNextConfig.i18n.defaultLocale
  },
  "catalogs": [{
    path: "<rootDir>/src/locale/{locale}/messages",
    include: ["<rootDir>"],
    exclude: ["**/node_modules/**", "/.next/", "/build/"]
  }],
  format: "minimal"
}

next.config.js

module.exports = {
  distDir: 'build',
  i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'fr',
  },
}

Expected behavior Everything works with .json files.

Additional context package.json

{
 "dependencies": {
    "@google-cloud/secret-manager": "^3.6.0",
    "@lingui/react": "^3.8.10",
    "jsonwebtoken": "^8.5.1",
    "next": "10.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.32.8"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@lingui/cli": "^3.8.10",
    "@lingui/core": "^3.8.10",
    "@lingui/loader": "^3.8.10",
    "@lingui/macro": "^3.8.10",
    "babel-plugin-macros": "^3.0.1"
  }
}

.babelrc

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-macros"]
}

[semoal]

Meanwhile I fix this issue, I have to speak with some Webpack maintainers to understand a new change on the js parser.

You can use an alternative approach (recommended by the way by the webpack team):

Your webpack configuration:

  webpack: (config, { isServer }) => {
    config.module.rules = [
      ...config.module.rules,
      {
        resourceQuery: /raw-lingui/,
        type: 'javascript/auto',
      }
    ];

  const { messages } = await import(`@lingui/loader!../locale/${locale}/messages.json?raw-lingui`)

This will say to Webpack that .json files with the @lingui/loader import must be loaded (yes or yes) with javascript parser / generator, if not, webpack tries to import it as a json file.

In previous days a workaround was working but right now is not working properly.

In a few days I hope to get a solution for this =)

[semoal]

It’s the same Loader (was just saying that just today I’ve working on that module), the problem comes with the .json handler, by default Webpack when using .json files tries to use a internal loader of Webpack instead of ours.