Trouble getting the extract working in monorepo

[paales]

Hi there! Awesome package, loving it so far. Running into a few issues, not sure how to properly solve it.

We're using nextjs and have a monorepo setup to allow the reuse of packages. We're transpiling (https://github.com/martpie/next-transpile-modules) our created packages and want to extract all messages from those packages as well (not sure how relevant this is).

Folder structure:

examples/nextjsproject
packages/mypackage

.linguirc

{
  "locales": ["en", "nl"],
  "catalogs": [
    {
      "path": "locales/{locale}",
      "include": ["<rootDir>/**/*.tsx"],
      "exclude": ["**/node_modules/**"]
    }
  ]
}

.babelrc

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

What works

If I run NODE_ENV=development lingui extract inside examples/nextjsproject it extracts as expected.

What doesn't work

• I've moved the .linguirc file to the root and chagne the include path to be "<rootDir>/examples/nextjsproject/**/*.tsx".
• I've copied the babelrc file

Now if I run the extract again I get:

Cannot process file /Users/paulhachmang/Sites/reachdigital-next/examples/magento-graphcms/components/AppShell/Footer.tsx: Unexpected token, expected "," (11:8)

   9 |
  10 | const useStyles = makeStyles(
> 11 |   (theme: Theme) => ({
     |         ^
  12 |     footer: {
  13 |       borderTop: '1px solid rgba(0,0,0,0.08)',
  14 |       padding: `${theme.page.vertical} ${theme.page.horizontal} ${theme.page.vertical}`,

Not sure what is happening here and what I have to do to make this work? 🤷 Anybody got a guess?

[semoal]

It is a known issue with Nextjs and Lingui that you need to specify the NODE_ENV=development before running extract.

Need to investigate it further but meanwhile that's the only fix I could share :)

[paales]

I ran it with NODE_ENV=development lingui extract, already ran into that issue, but found it in the issue list and that was a quick workaround :)

[paales]

@semoal Any suggestion how to solve this? I can't figure out how to properly configure it.

I've tried to make it work with the following configuration:

{
  "locales": [
    "en",
    "nl"
  ],
  "catalogs": [
    {
      "path": "locales/{locale}",
      "include": [
        "<rootDir>/**/*.tsx",
        "<rootDir>/../../packages/**/*.tsx"
      ],
      "exclude": [
        "**/node_modules/**"
      ]
    }
  ]
}

This probably is somewhat to be expected since we're going above the root directory.

Alternative: I've tried to use the @lingui/babel-plugin-extractmessages but this doesn't play nice with nextjs and completely breaks the build.

My .babelrc

{
  "presets": ["next/babel"],
  "plugins": ["macros", "@lingui/babel-plugin-extract-messages"]
}

But this completely breaks my nextjs with errors like:

[next] error - Error: Cannot find module '/Users/paulhachmang/Sites/reachdigital-next/examples/magento-graphcms/.next/fallback-build-manifest.json'
[next] Require stack:
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/load-components.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/lib/start-server.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/cli/next-dev.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/bin/next
[next] Error: Cannot find module '/Users/paulhachmang/Sites/reachdigital-next/examples/magento-graphcms/.next/fallback-build-manifest.json'
[next] Require stack:
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/load-components.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/lib/start-server.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/cli/next-dev.js
[next] - /Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/bin/next
[next]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
[next]     at Function.mod._resolveFilename (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/build/webpack/require-hook.js:171:28)
[next]     at Function.Module._load (internal/modules/cjs/loader.js:746:27)
[next]     at Module.require (internal/modules/cjs/loader.js:974:19)
[next]     at require (internal/modules/cjs/helpers.js:93:18)
[next]     at Object.loadDefaultErrorComponents (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/load-components.js:22:24)
[next]     at DevServer.getFallbackErrorComponents (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/dev/next-dev-server.js:656:43)
[next]     at async DevServer.renderErrorToResponse (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js:1691:40)
[next]     at async pipe.req.req (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js:1631:30)
[next]     at async DevServer.pipe (/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js:1108:25) {
[next]   code: 'MODULE_NOT_FOUND',
[next]   requireStack: [
[next]     '/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/load-components.js',
[next]     '/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next-server.js',
[next]     '/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/next.js',
[next]     '/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/server/lib/start-server.js',
[next]     '/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/cli/next-dev.js',
[next]     '/Users/paulhachmang/Sites/reachdigital-next/node_modules/next/dist/bin/next'
[next]   ]
[next] }

I thought using the .babelrc loader is preferable but we'd rather not use the babel loader as nextjs 12 is using swc.rs

[paales]

Alright I've got a workaround:

  extractors: [require.resolve('@lingui/cli/api/extractors/typescript')],

This does actually parse the files so that is a step in the right direction.

I've got some issues where it is not picking up all translations... investigating

[farrahs17]

Hey can you five more details on how you're handling this work around? I am also working with Nextjs and typescript and there is nothing extracting at all.

Alright I've got a workaround:

  extractors: [require.resolve('@lingui/cli/api/extractors/typescript')],

This does actually parse the files so that is a step in the right direction.

I've got some issues where it is not picking up all translations... investigating

Where did you add that bit of code? Is it working well now?