TSCompiler not handling jsx files

[Steph-Yu]

This bug is related to this issue on slack.

I have an existing reactJS app which I want to export out to Bit. I have initialised Bit into my project but I am facing an issue when I am trying to run bit build or bit tag as it errors when Bit's TS Compiler runs. I have set the environment correctly by running bit set teambit.react/react. It seems that the TSCompiler cannot handle jsx files?

The error that I encounter:

I am using Bit v0.0.697.

[HalahRaadSalih]

The default typescript compiler uses react for jsx. To get rid of having to import react into files using react you need to set jsx setting to be react-jsx instead.

To get the env config for any component run bit env get [insert-component-name-here] this is the output of one of my components:

configured compiler: teambit.typescript/typescript (TypeScript @ 4.4.2)
compiler config:
{
  "compilerOptions": {
    "lib": [
      "es2019",
      "DOM",
      "ES6",
      "DOM.Iterable"
    ],
    "target": "es2015",
    "module": "CommonJS",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "outDir": "dist"
  },
  "exclude": [
    "dist",
    "package.json"
  ],
  "include": [
    "**/*",
    "**/*.json"
  ]
}

If you want to get rid of the error you have to create custom env to override tsconfig. Once created, the components needs to use it.

• I have an example here: https://github.com/HalahRaadSalih/bit-env-config-error
• extact config I'm talking about https://github.com/HalahRaadSalih/bit-env-config-error/blob/main/bit-env-error/extensions/my-react/typescript/tsconfig.json
• how to create a custom react env: https://bit.dev/docs/frameworks/react/config-react-tools