CRA4+TypeScript failure on jsx:preserve

[davakos]

Describe the bug Informational: This is not a LinguiJS bug, but does impact the ability to run Lingui when using Create React App 4 with TypeScript. It appears that CRA4 currently fails if you set "jsx": "preserve" in your tsconfig.json file, which a Lingui requirement for preserving JSX and tagged template literals: https://lingui.js.org/guides/typescript.html

In create-react-app project refer to the following issues:

• https://github.com/facebook/create-react-app/issues/9874#issuecomment-722403918
• https://github.com/facebook/create-react-app/issues/9868

To Reproduce npx create-react-app cra4 --template redux-typescript Then modify tsconfig.json and change:

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "es2016"
  }
}

run dev server with: npm start

Results:

> cra4@0.1.0 start cra4
> react-scripts start

./node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (./node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (./node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cra4@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cra4@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Expected behavior Setting jsx:preserve fails to start a run server. Setting jsx:react (the default) starts a run server but Lingui is unable to extract message catalogs.

Additional context

• jsLingui version 3.0.3
• Babel version 7.12.3
• Using Create-React-App v4, react-scripts 4.0.0
• TypeScript version 4.0.5

[semoal]

Thanks for pointing it out, I'm sure that will help future users, probably the issue will be fixed on his side asap

[davakos]

Update: This appears to be fixed in create-react-app/react-scripts 4.0.1.

I have not tested exhaustively, but this worked in my testing:

• Changed an application string, correctly shows "Missing Translation" in my running app per configuration of setupI18n option missing
• Running npm run extract properly extracts new strings into a message catalog file
• Running npm run compile properly compiles new strings into a message file
• Adding a new language to the app properly displays the translated strings in the app

Environment:

• Node v14 (14.15.3)
• React 17.0.1
• TypeScript 4.1.3
• LinguiJS 3.3.0

I tested this both in an existing app that I upgraded to React 17 + TypeScript 4 and also in a test app I just bootstrapped using latest 4.0.1 version of create-react-app and following LinguiJS documentation here: https://lingui.js.org/tutorials/setup-cra.html

One thing I'd like to note from the docs on using LinguiJS with TypeScript documentation: https://lingui.js.org/guides/typescript.html

I am still setting compilerOptions => "target": "es2016" in tsconfig.json, but when I set "jsx": "preserve" this setting is overwritten with "react-jsx" whenever you call react-scripts (such as by running npm start). You will also briefly see the following console message as the dev server starts:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)

There does not appear to be any way to prevent or override this behavior, but at the same time, I appear to be able to still utilize all LinguiJS functionality without setting "jsx": "preserve". I have not tested this exhaustively, but perhaps if LinguiJS maintainers have an opportunity to ensure this does not cause any breakages or unintended side-effects, the LinguiJS/TypeScript documentation noted above could be updated to indicate that this option is no longer required if using TS4+React 17+CRA 4.0.1.

Best regards,

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.