I am trying to use ng-packagr to publish a jsx react component through an angular library. I have an angular app that consumes the library. The path of my component is ./projects/my-lib/src/lib/my-component.jsx. When I export it through the public-api.ts I use: export * from './lib/my-component' (without the.jsx extenion) and I get an error when running my app:
Error: Module not found: Error: Can't resolve './lib/my-component' in 'C:\Work\my-app\projects\my-lib\src'
If I use the jsx extension like so: export * from './my-lib/my-component.jsx the app picks up the file and properly loads the component in the browser. However when I build using ng build my-lib to publish I get the error:
Could not resolve "./lib/my-component.jsx" from "dist/my-lib/esm2020/index.mjs"
When I look at index.d.ts in the dist/my-lib folder it has the line export * from './my-lib/my-component.jsx but the lib folder only contains lib/my-component.d.ts. I take it that the module export is trying to resolve the full explicit path to a type definition. Since the path has jsx it is not being resolved correctly.
Is there a tsconfig variable that will help me? Something that will resolve the path ./lib/my-component to ./lib/my-component.jsx? I have tried adding 'jsx': 'react-jsx' to tsconfig.compilerOptions but it hasn't helped. I also added "include": ["./src/**/*.ts", "./src/**/*.js", "./src/**/*.tsx", "./src/**/*.jsx"] and that hasn't helped either.
