Unable to compile .tsx files in Angular16 Project

Question

I recently migrated my angular9 project to angular16. In my existing angular 9 project I had some .tsx files which were compiling successfully during npm build. However after migrating to angular 16 getting this error -

`Could not resolve "../../components/graphiql/graphiql.component.tsx" from "dist/my-library/esm2022/lib/pages/create-template/create-template.component.mjs"

@angular-devkit/build-angular:ng-packagr doesn't seem to support .tsx files. `

Tried updating the version of react packages, angular packges, tried all the combinations in tsconfig.json Tried updating angular builder.

angular builder - @angular-devkit/build-angular:ng-packagr

package.json

angular packages

"@angular-builders/custom-webpack": "^16.0.0",
"@angular-devkit/build-angular": "^16.1.0",
"@angular-eslint/builder": "16.1.0",
"@angular-eslint/eslint-plugin": "16.1.0",
"@angular-eslint/eslint-plugin-template": "16.1.0",
"@angular-eslint/schematics": "16.1.0",
"@angular-eslint/template-parser": "16.1.0",
"@angular/animations": "^16.1.0",
"@angular/cli": "^16.0.4",
"@angular/common": "^16.1.0",
"@angular/compiler": "^16.1.0",
"@angular/compiler-cli": "^16.1.0",
"@angular/core": "^16.1.0",
"@angular/elements": "^16.1.0",
"@angular/forms": "^16.1.0",
"@angular/language-service": "^16.1.0",
"@angular/localize": "^16.1.0",
"@angular/platform-browser": "^16.1.0",
"@angular/platform-browser-dynamic": "^16.1.0",

React packages

"react": "^16.14.0",
"react-dom": "^16.14.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",

graphiql packages

"graphiql": "^0.17.5",
"graphiql-explorer": "^0.6.2",
"graphql": "^14.3.1",
"graphql-language-service-interface": "2.8.2",
"graphql-language-service-parser": "1.9.0",
"graphql-language-service-utils": "2.5.2",
"graphql-ws": "^4.2.2",

tsconfig.json

"compilerOptions": {
      "baseUrl": "./",
      "downlevelIteration": true,
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "module": "ES2020",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "ES2020",
      "allowSyntheticDefaultImports": true,
      "jsx": "react",
      "skipLibCheck": true,
      "traceResolution":true,
      "typeRoots": [
        "node_modules/@types"
      ],
   ......}

Answer 1

You are using the .tsx for angular component graphiql.component.tsx that needs to change to .ts and call the react component using React.createElement

   const element = React.createElement(ReactComponent, {});
   ReactDom.render(element, this.containerRef.nativeElement);