`yarn extract` errors when using `next/babel` preset and JSX inside `.js` files.

[adamsoderstrom]

Describe the bug
yarn extract errors when using next/babel babel preset and JSX inside .js files.

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

1. Navigate to the nextjs-babel directory in this repo.
2. Create a JSX file with extension .js

// Button.js
export default function Button() {
   return <button>Click me</button>
}

4. Run yarn extract
5. You get the following error:

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

✖
Catalog statistics for src/locales/{locale}:
┌──────────┬─────────────┬─────────┐
│ Language │ Total count │ Missing │
└──────────┴─────────────┴─────────┘

(use "yarn extract" to update catalogs with new messages)
(use "yarn compile" to compile catalogs for production)

Expected behavior
yarn extract shouldn't render the

Additional context
Add any other context about the problem here.

• jsLingui version lingui --version -
  4.0.0-next.3

• Babel version npm list @babel/core
  ext-js-babel@0.1.0
  └─┬ @lingui/cli@4.0.0-next.3
  └─┬ @babel/core@7.21.3
  └─┬ @babel/helper-compilation-targets@7.20.7
  └── @babel/core@7.21.3 deduped

• Macro support:

• I'm using SWC with @lingui/swc-plugin

• I'm using Babel with babel-macro-plugin

• I'm not using macro

• NextJs

[timofei-iatsenko]

Working as expected. You should have jsx syntax in .jsx or .tsx files only. As of v4 your babel config is not respected anymore.

As a workaround, you can pass your own extractor implementation (simply take it from the repo) and with all babel plugins you needed.

[adamsoderstrom]

Oh, my bad! Thanks for the pointers, @thekip!

[trungdq88]

If you arrived here from Google and want to see what exactly the extractor file should look like, here is my working version:

customExtractor.js

import { extractor as defaultExtractor } from '@lingui/cli/api';

export default {
  match(filename) {
    return filename.endsWith('.js');
  },
  extract(filename, code, onMessageExtracted, ctx) {
    return defaultExtractor.extract(
      filename.replace('.js', '.jsx'),
      code,
      onMessageExtracted,
      ctx
    );
  },
};

lingui.config.js

import customExtractor from './customExtractor';

module.exports = {
  locales: ['en', 'sv'],
  sourceLocale: 'en',
  catalogs: [
    {
      path: '<rootDir>/locale/{locale}/messages',
      include: ['<rootDir>/'],
      exclude: ['**/node_modules/**'],
    },
  ],
  extractors: [customExtractor],
};

I'm not 100% sure if this work properly (it seems to be).

[timofei-iatsenko]

@trungdq88 thanks. That would work.

Offtopic. I'm wondering how other tooling in your project work with this setup? As far as i know, even IDE's would complain if you have a JSX syntax not in JS files. And what is the point of not using jsx extension for such files?

[trungdq88]

@thekip I mostly just follow the convention put in place for any next.js project. I also think it's cleaner. No IDE complains from my setup.

[timofei-iatsenko]

Thanks for explanation, i'm using Typescript for years and don't really follow the vanilla js world.
In TS JSX is conflicting with built-in syntax which is the reason why file extension is so important (it changes the behavior of parser)

I created a PR tackling this issue. #1678

[trungdq88]

You're awesome 🙏