question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Extract is finding 0 messages for typescript project using tsc, not babel

See original GitHub issue

Describe the bug Can’t seem to extract messages from .ts files within the project. Docs say lingui v3 works with typescript out of the box, but I’m not seeing that.

Possibly to do with my project not depending on babel? I don’t have a .babelrc file because I use tsc to build and dev

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

import gql from 'graphql-tag';                                                              
import { i18n } from '@lingui/core';                                                        
                                                                                            
export default gql`                                                                         
  enum ClaimStateTranslated {                                                               
    ${i18n._('ClaimState.Draft', null, { message: 'Draft' })}                              
    ${i18n._('ClaimState.Lodged', null, { message: 'Lodged' })}                            
    ${i18n._('ClaimState.Active', null, { message: 'Active' })}                                                         
  }                                                                                         
`; 

Expected behavior Expect the messages to be extracted.

Additional context Add any other context about the problem here.

  • jsLingui version 3.3.0
  • Babel version none
  • Your Babel config none

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
amirqasemi74commented, Feb 7, 2021

in case anyone else needs to extract translations from .ts files without using @lingui/macro, you need to add /*i18n*/ on each line like this:

/*i18n*/ i18n._('ClaimState.Draft', null, { message: 'Draft' });

or from my original example:

export default gql`                                                                         
  enum ClaimStateTranslated {                                                               
    ${/*i18n*/i18n._('ClaimState.Draft', null, { message: 'Draft' })}                              
    ${/*i18n*/i18n._('ClaimState.Lodged', null, { message: 'Lodged' })}                            
    ${/*i18n*/i18n._('ClaimState.Active', null, { message: 'Active' })}                                                         
  }                                                                                         
`; 

and you can’t supply first param of i18n._ like {id: '', message: ''} as described in migration v2 to v3 docs. lingui extract won’t pick this up unless you use the v2 syntax

this is not a clean solution. i think cli should support extraction without babel macros

1reaction
teebszetcommented, Jan 5, 2021

in case anyone else needs to extract translations from .ts files without using @lingui/macro, you need to add /*i18n*/ on each line like this:

/*i18n*/ i18n._('ClaimState.Draft', null, { message: 'Draft' });

or from my original example:

export default gql`                                                                         
  enum ClaimStateTranslated {                                                               
    ${/*i18n*/i18n._('ClaimState.Draft', null, { message: 'Draft' })}                              
    ${/*i18n*/i18n._('ClaimState.Lodged', null, { message: 'Lodged' })}                            
    ${/*i18n*/i18n._('ClaimState.Active', null, { message: 'Active' })}                                                         
  }                                                                                         
`; 

and you can’t supply first param of i18n._ like {id: '', message: ''} as described in migration v2 to v3 docs. lingui extract won’t pick this up unless you use the v2 syntax

Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation - Using Babel with TypeScript
Do you need a build pipeline with multiple potential outputs? Use babel for transpiling and tsc for type checking. Babel for transpiling, tsc...
Read more >
Documentation - tsc CLI Options - TypeScript
Flag Type Default ‑‑allowJs boolean false ‑‑allowUmdGlobalAccess boolean false ‑‑allowUnreachableCode boolean
Read more >
Documentation - Migrating from JavaScript - TypeScript
Converting a JavaScript codebase over to TypeScript is, while somewhat tedious, usually not challenging. In this tutorial, we're going to look at how...
Read more >
TSConfig Reference - Docs on every TSConfig option
Intro to the TSConfig Reference. A TSConfig file in a directory indicates that the directory is the root of a TypeScript or JavaScript...
Read more >
Documentation - Integrating with Build Tools - TypeScript
How to use TypeScript with other build tools. ... Babel. Install. sh. npm install @babel/cli @babel/core @babel/preset-typescript --save-dev ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found