SyntaxError: First argument must be tagged template expression. You should use 'msgid' tag

[MrOrz]

Reproduce

1. Download https://gist.github.com/MrOrz/4820a9c6896def2398c59f380ca1e0cd
2. yarn
3. npm start

Expected

File being compiled and served in HTTP server, no error found

Actual

Shows error during compile:

ERROR in ./MyComponent.js
Module build failed: SyntaxError: First argument must be tagged template expression. You should use 'msgid' tag
Error: First argument must be tagged template expression. You should use 'msgid' tag
    at logAction (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-plugin-ttag/dist/context.js:57:13)
    at C3poContext.validationFailureAction (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-plugin-ttag/dist/context.js:231:7)
    at extractOrResolve (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-plugin-ttag/dist/plugin.js:115:19)
    at PluginPass.<anonymous> (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-plugin-ttag/dist/plugin.js:82:7)
    at newFn (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/johnsonliang/workspace/reproduce-ttag-msgid/node_modules/babel-traverse/lib/context.js:103:17)

   6 | 
   7 |   return <p>{
>  8 |     ngettext(
     |     ^
   9 |       msgid`We have ${size} apple`,
  10 |       `We have ${size} apples`,
  11 |       size

 @ multi (webpack)-dev-server/client?http://localhost:8888 ./MyComponent.js
webpack: Failed to compile.

Affected versions

babel-plugin-ttag 1.4.1~1.7.3

babel-plugin-ttag 1.4.0 is the last good version.

Note

Seems like a regression issue. Previous fix: https://github.com/ttag-org/babel-plugin-ttag/pull/81 .

[anilanar]

I figured out a minimal reproducible case:

// myfile.js

import { ngettext, msgid } from 'ttag';

export function* foo(length) {
  yield bar(ngettext(
    msgid`Foo ${length}`,
    `Foo ${length}`,
    length,
  ));
}

// .babelrc 
{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [
    [
      "babel-plugin-ttag",
      {
        "addComments": "t:",
        "numberedExpressions": true,
        "extract": { "output": "build/foo.po" }
      }
    ]
  ]
}

$ babel myfile.js

[AlexMost]

Thanks @anilanar! Will try to investigate ASAP.

[AlexMost]

Sorry for the late investigation. But finally this issue was fixed in 1.7.17. You can check out the new version. Please, let me know if that fixes your issue!

[AlexMost]

Keep in mind, while building for production always set resolve setting in babel-plugin-ttag config. In other case the child nodes for ngettext will not be transpiled.

[anilanar]

@AlexMost That's a big problem for us, because we don't use resolve. Our translations are only available during runtime (not at compile time). Can we use resolve.unresolved: skip to overcome the issue?

[AlexMost]

@anilanar ah, if you are using this plugin only for translations extraction - you can just exclude ttag plugin for the production build. Have you tried ttag-cli for the translations extract?

Or, you can also stay with resolve.unresolved: skip in version 1.7.15. I am going on a vacation for the next week and hope to fix that little issue after.

[anilanar]

Sadly it’s not that simple. It’s a monorepo with shared dependencies and multiple projects having their own webpack builds so each project (and its deps) needs its own translations extracted. Therefore using a babel plugin is the easiest way of doing it. Otherwise I’d have to make webpack report all files that was part of a build and feed them into ttag-cli, which won’t be able to handle modules that were tree shaken or omitted from the build due to NODE_ENV flags etc.

[AlexMost]

Hi @anilanar, here is a fix for the validation - https://github.com/ttag-org/babel-plugin-ttag/pull/135. You can try 1.7.19 version. Let me know if that works for you.

[anilanar]

@AlexMost Appreciate it. Added it to the current sprint, will let you know.