i18next-scanner doesn't pick up Trans tags

[Krisztian Nagy]

Hi,
I am wondering if you were able to successfully extract Trans tags from the transpiled js files?
If I modify src/shared/components/Features/index.tsx to look like this:

import React from 'react';
import { Trans } from 'react-i18next';
import { withTranslation, WithTranslation } from 'react-i18next';
import css from './Features.module.css';

const Features = ({ t }: WithTranslation) => (
    <React.Fragment>
        <h2>{t('features')}</h2>
        <ul className={css.wrapper}>
            <li className={css.react}>React 16.x (latest)</li>
            <li className={css.webpack}>Webpack 4</li>
            <li className={css.hot}>Babel 7</li>
            <li className={css.hot}>ESLint 5</li>
            <li className={css.hot}>TypeScript (using Babel 7)</li>
            <li className={css.hot}>Jest 24</li>
            <li>React Testing Library</li>
            <li>React Router 5</li>
            <li>Redux (+ Thunk)</li>
            <li>Immer</li>
            <li>Reselect</li>
            <li>React Helmet</li>
            <li>Express Webserver + Server Side Rerendering</li>
            <li>{t('i18n-support')}</li>
            <li>CSS Modules</li>
            <li>PostCSS</li>
            <li>Prettier (incl. precommit-hook via lint-staged + husky)</li>
            <li>HMR (buggy, see Readme)</li>
            <Trans i18nKey="some.key">Some text</Trans>
        </ul>
    </React.Fragment>
);

export default withTranslation()(Features);

Then if I run yarn i18n:scan; it extracts the ones with t() but not the Trans tags. Would you have any idea why is that or did anyone get it working?

I read all the issues from i18next-scanner and read through the documentation multiple times. In theory the setup you have should work out of the box. (Except if there is no keys set if you want to use the value as fallback)

[Manuel Bieh]

Will look into that. Sorry for my late reply.

[Krisztian Nagy]

Hi. No problem. I actually have the fix for it. Unfortunately I was/am too busy to create a PR for it.
The issues is: babel transpiles the Trans into a react component so the static scanner cannot pick it up anymore.

babel.config.js

    compact: true,
    presets: [
        [
            '@babel/env',
            {
                modules: false,
                targets: {
                    node: 'current',
                },
            },
        ],
        //'@babel/react', //Needs to be taken out of preset in order to be able to use i18next-scanner
        '@babel/typescript',
    ],
    plugins: [
        '@babel/proposal-object-rest-spread',
        '@babel/proposal-class-properties',
        '@babel/proposal-optional-chaining',
        '@babel/syntax-dynamic-import',
        'macros',
    ],
    env: {
        test: {
            plugins: [
                '@babel/transform-modules-commonjs',
                '@babel/syntax-dynamic-import',
                '@babel/plugin-transform-runtime',
            ],
        },
        production: {
            presets: ['@babel/react'],
        },
        development: {
            presets: ['@babel/react'],
        },
    },
}

Then have to specify BABEL_ENV in the scripts at package.json

...
"scripts": {
    "analyze": "yarn-or-npm build:with-stats && yarn-or-npm start:analyzer",
    "build": "cross-env NODE_ENV=production BABEL_ENV=production node scripts/build.js",
    "build:with-stats": "cross-env NODE_ENV=production BABEL_ENV=production webpack --config config/webpack.config.js/client.prod.js --json > build/client/static/bundle-stats.json",
    "clean:transpiled": "rimraf build/transpiled",
    "depgraph": "depcruise -c .dependency-cruiser.js --exclude '^node_modules' --output-type dot src | dot -T svg > dependency-graph.svg",
    "i18n:scan": "cross-env NODE_ENV=i18n BABEL_ENV=i18n yarn-or-npm transpile && yarn-or-npm i18next-scanner './build/transpiled/**/*.js' && yarn clean:transpiled",
    "link-react": "yarn-or-npm link react react-dom",
    "lint": "concurrently \"yarn-or-npm lint:js\" \"yarn-or-npm lint:css\"",
    "lint:js": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:css": "stylelint src/**/*.css",
    "lint:deps": "depcruise -c .dependency-cruiser.js src/",
    "plop": "plop",
    "start": "cross-env NODE_ENV=development BABEL_ENV=development node scripts/start.js",
    "start:analyzer": "webpack-bundle-analyzer build/client/static/bundle-stats.json",
    "test": "node scripts/test.js --env=jsdom",
    "test:update": "yarn-or-npm test --updateSnapshot",
    "transpile": "yarn-or-npm babel -d build/transpiled ./src --extensions .es6,.js,.es,.jsx,.mjs,.ts,.tsx --ignore **/*.d.ts",
    "tsc": "tsc --noEmit"
  },
...