I am looking to publish a react component and web component from an angular library.
I followed a few tutorials that step you through creating a react component inside an angular library. For example you install react
and react-dom
into the workspace, you add "jsx": "react-jsx"
to your tsconfig, you wrap your react component in a web component, you import your web component into your project app, you add CUSTOM_ELEMENTS_SCHEMA to the app.module.ts, and you use the webcomponent markup inside of the template of the component of your choosing. (I also added the line "include": ["./src/**/*.ts", "./src/**/*.js", "./src/**/*.tsx", "./src/**/*.jsx"],
to the tsconfig.)
I am now trying to set up building the library. I added an index.ts file to the library as the entry point and export my web component from it:
export * as any from './lib/my-web-component.jsx';
I'm getting non-descriptive errors when I build that say
✖ Generating FESM2020
Could not resolve "./lib/my-web-component.jsx" from "dist/my-lib/esm2020/index.mjs"
I realize there is tooling that a createReact app uses to bundle the components. Is it possible to publish react components from an angular library? Does anyone have any insight into what this error is from, how to solve it, or how to get a more descriptive message?