[BUG] Unable to extract the translations

[vinhtrinh]

Summary

Unable to extract the translations

Steps To Reproduce

Base Setup: optional

1. Create a new Retail React App
   • npx @salesforce/pwa-kit-create-app --preset retail-react-app-demo
2. Open the created project and install the dependencies

Issue 1: Unable extract the translations

1. Run script to extract the translations
   • npm run extract-default-translations
2. The script removes all translation messages for en-US and en-GB.

Issue 2: Command failed

1. Copy components folder from Retail React App to overrides/app folder
   • This step simulates a large set of override templates in a real project
2. Run script to extract the translations
   • npm run extract-default-translations
3. The script exist with error -4064, code ENAMETOOLONG

formatjs extract \
    "overrides/app/**/*.{js,jsx,ts,tsx}" \
    "./node_modules/@salesforce/retail-react-app/app/**/*.{js,jsx,ts,tsx}" \
    --out-file translations/en-US.json \
    --id-interpolation-pattern [sha512:contenthash:base64:6] \
    --ignore "...a long list of ignore files"

Error: spawn ENAMETOOLONG
    at ChildProcess.spawn (node:internal/child_process:414:11)
    at spawn (node:child_process:761:9)
    at Object.execFile (node:child_process:351:17)
    at exec (node:child_process:234:25)
    at extract (./node_modules/@salesforce/retail-react-app/scripts/translations/extract-default-messages.js:75:9)
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (./node_modules/@salesforce/retail-react-app/scripts/translations/extract-default-messages.js:85:27)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32) {
  errno: -4064,
  code: 'ENAMETOOLONG',
  syscall: 'spawn'
}

Expected result

The script should extract messages to translations folder

[bendvc]

Thanks for reporting this issue @vinhtrinh. I've validated that this is an issue, I'll take a look at your PR submission as well and see how we can get this fixed asap and a new bug fix release pushed out.

[bendvc]

@vinhtrinh I've partially implemented a fix (for issue 1) and it's been merged here. I'll continue looking at issue 2, I want to discuss this with the dev that implemented that feature as I believe we had a conversation about similar limitations previously.

[vinhtrinh]

Hi @bendvc, thanks for the quick fix. I guess we can close the linked PR to this issue.

About the issue no.2, if we want to keep current behavior, I would like to suggest some options below

1. Use previous solution, rename overridden files to exclude them from messages extraction.
   • Improve the error handling to ensure file names restore to their origin names
   • Convert async functions to sync, use the try ... catch ... statement and restore them in the finally block
2. Use --extract-source-location and --format options from formatjs extract command
   • With the file name in extracted messages, we can create a Custom Formatter to exclude messages from overridden files
   • Extracted messages with --extract-source-location option

     {
     "header.button.assistive_msg.my_account": {
     "col": 55,
     "defaultMessage": "My account ^^!",
     "end": 5963,
     "file": "overrides/app/components/header/index.jsx",
     "line": 158,
     "start": 5801
     },
     "header.button.assistive_msg.my_account__old": {
     "col": 55,
     "defaultMessage": "My account",
     "end": 5964,
     "file": "app/components/header/index.jsx",
     "line": 158,
     "start": 5801
     }
     }

[joeluong-sfcc]

Hi @vinhtrinh, thanks for opening this issue. I've tried to reproduce issue 2 based on the steps provided, but the script runs with no errors on my side. Could you provide some details about your environment?

• Operating System
• Node version
• @salesforce/pwa-kit-create-app version

[vinhtrinh]

Hi @joeluong-sfcc, this issue still happen with latest @salesforce/pwa-kit-create-app (v3.4.0) and @salesforce/retail-react-app (v2.3.1)

• OS: Windows 10
• Node: v18.19.0
• NPM: v10.2.3

npx @salesforce/pwa-kit-create-app@latest --preset retail-react-app-demo
cd ./retail-react-app-demo
cp -r ./node_modules/@salesforce/retail-react-app/app/components ./overrides/app/
npm run extract-default-translations

I guess this issue only happen on Windows with a smaller max command length limit.

[git2gus[bot]]

This issue has been linked to a new work item: W-15020149