i18next-scanner TypeScript Transform

Common errors

• TypeError: (0 , i18next_scanner_typescript_1.default) is not a function

  cause Attempting to import `i18next-scanner-typescript` using an ES module `import` syntax in a CommonJS context (e.g., a `.js` config file). The package exports a CommonJS module with a default function.
  fix Use CommonJS `require` syntax: `const typescriptTransform = require('i18next-scanner-typescript');`

• SyntaxError: 'import' and 'export' may only appear with 'sourceType: module'

  cause i18next-scanner is attempting to parse a TypeScript file directly because the `typescriptTransform` is either not configured correctly or the `.ts`/`.tsx` extensions are mistakenly included in the main `options.func.extensions` or `options.trans.extensions`.
  fix Verify that `typescriptTransform` is correctly added to the `transform` array in your `i18next-scanner` configuration, and crucially, ensure that `.ts` and `.tsx` are NOT listed in the `options.func.extensions` or `options.trans.extensions`.

Warnings

• gotcha Do NOT include `.ts` or `.tsx` file extensions in the `options.func.extensions` or `options.trans.extensions` arrays in your `i18next-scanner` configuration. These options are for `i18next-scanner` to process already-JavaScript files. The `typescriptTransform` handles transpilation of TS/TSX independently.
  Fix: Ensure `options.func.extensions` and `options.trans.extensions` only contain `.js`, `.jsx`, or similar JavaScript extensions. Configure the TS/TSX extensions solely within the `typescriptTransform` options.
• breaking The `i18next-scanner-typescript` package specifies a peer dependency on `typescript` version `5.x`. Using an incompatible version of TypeScript (e.g., 4.x or 6.x) may lead to transpilation errors or unexpected behavior.
  Fix: Ensure your project's `typescript` dependency is set to `5.x`. You may need to run `npm install typescript@5` or `yarn add typescript@5` if there's a conflict.

Install

• npm install i18next-scanner-typescript npm
• yarn add i18next-scanner-typescript yarn
• pnpm add i18next-scanner-typescript pnpm

Imports

• typescriptTransform
  wrong:

  import typescriptTransform from 'i18next-scanner-typescript';

  correct:

  const typescriptTransform = require('i18next-scanner-typescript');

  The transform is designed to be consumed in CommonJS configuration files for i18next-scanner. Direct ESM imports are not typically supported for config files.

Quickstart

This configuration sets up `i18next-scanner` to process TypeScript and TSX files using the `i18next-scanner-typescript` transform. It demonstrates how to specify the TS/TSX file extensions for the transform while correctly excluding them from the scanner's primary `func` and `trans` options. The custom transform function provides access to `i18next-scanner`'s internal parser to process the transpiled output. To run this, first install `i18next-scanner`, `i18next-scanner-typescript`, and `typescript` as dev dependencies. Create an example `src/App.tsx` file with i18n keys (e.g., `<Trans>Hello</Trans>` or `t('key')`). Then, execute `npx i18next-scanner --config i18next-scanner.config.js` to extract keys.

const typescriptTransform = require('i18next-scanner-typescript');
const path = require('path');

module.exports = {
  input: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.spec.{js,jsx,ts,tsx}'],
  output: path.join(__dirname, 'public/locales/{{lng}}/translation.json'),
  options: {
    debug: true,
    sort: true,
    lngs: ['en', 'fr'],
    defaultValue: (lng, namespace, key) => key,
    resource: {
      loadPath: path.join(__dirname, 'public/locales/{{lng}}/{{ns}}.json'),
      savePath: path.join(__dirname, 'public/locales/{{lng}}/{{ns}}.json'),
      jsonIndent: 2,
    },
    func: {
      extensions: ['.js', '.jsx'], // Important: Only list JS/JSX extensions here
      list: ['i18next.t', 't'],
    },
    trans: {
      extensions: ['.js', '.jsx'], // Important: Only list JS/JSX extensions here
      component: 'Trans',
    },
  },
  transform: typescriptTransform(
    {
      extensions: ['.ts', '.tsx'], // List TS/TSX extensions for the transform itself
      tsOptions: {
        target: 'es2017',
        jsx: 'react',
      },
    },
    function customTransform(outputText, file, enc, done) {
      // `this` context here is the i18next-scanner parser instance
      // Access parsing functions via `this.parseFuncFromString`, etc.
      this.parser.parseTransFromString(outputText);
      this.parser.parseFuncFromString(outputText);
      done();
    }
  ),
};