typescript.react.portability.i18next.jsx-not-internationalized.jsx-not-internationalized

profile photo of semgrepsemgrep
Author
unknown
Download Count*
LGPL Commons Clause
License

JSX element not internationalized: '$MESSAGE'. You should support different languages in your website or app with internationalization. Instead, use packages such as i18next in order to internationalize your elements.

Run Locally

Run in CI

Semgrep CI docs

Defintion

Edit RuleView Source
Open in Playground 
rules:
  - id: jsx-not-internationalized
    patterns:
      - pattern: <$ELEMENT>$MESSAGE</$ELEMENT>
      - metavariable-regex:
          metavariable: $MESSAGE
          regex: ([A-Za-z\n ]+[A-Za-z]+[A-Za-z\n ]+)
      - pattern-not: <$ELEMENT>t('$KEY', ...)</$ELEMENT>
    message: "JSX element not internationalized: '$MESSAGE'.  You should support
      different languages in your website or app with internationalization.
      Instead, use packages such as `i18next` in order to internationalize your
      elements."
    languages:
      - typescript
      - javascript
    severity: WARNING
    metadata:
      category: portability
      technology:
        - react
        - mui
        - i18next
      references:
        - https://www.notion.so/hendyirawan/Internationalization-Localization-Policy-318c21674e5f44c48d6f136a6eb2e024
        - https://mui.com/
        - https://react.i18next.com/
      license: Commons Clause License Condition v1.0[LGPL-2.1-only]

Examples

jsx-not-internationalized.tsx

return (
    <HeroContentStyle>
        <motion.div variants={varFadeInRight}>
            // ruleid: jsx-not-internationalized
            <Typography
                variant="h4"
                sx={{
                mt: 5,
                color: 'common.white',
                fontWeight: 'fontWeightMedium',
                }}
            >
                Organizations who have trusted us
            </Typography>
        </motion.div>

        <motion.div variants={varFadeInRight}>
            // ok: jsx-not-internationalized
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                {t('menu.customers')}
            </Typography>
            // ok: jsx-not-internationalized
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                {t('menu.customers', {context: 'male'})}
            </Typography>
            // ok: jsx-not-internationalized
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                {i18next.t('menu.customers')}
            </Typography>
            // ok
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
            </Typography>
            // ok
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                123
            </Typography>
            // ok
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                45.53
            </Typography>
            // ok
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                144,90
            </Typography>
            // ok
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                12-12-1220
            </Typography>
            // ok
            <Typography
                variant="h1"
                sx={{
                color: 'primary.main',
                fontWeight: 'fontWeightMedium',
                }}
            >
                12.50%
            </Typography>
        </motion.div>
    </HeroContentStyle>);