I have a React TS package.

package Folder structure

index.ts contains: export {default as OFIcon} from './OFIcon'

Build folder structure

build/esm/index.js

I am using yarn link to link it to another React TS app. When I try to import my component like so, import {OFIcon} from @oneface-react/oficon, I get the console error:

Uncaught SyntaxError: The requested module '/@fs/C:/Users/avidovic/OFIcon/build/esm/index.js' does not provide an export named 'OFIcon' (at Home.tsx:3:10)

The commands I use to build my package is:
scripts": { "compile:cjs": "tsc --outDir ./build/cjs --module commonjs", "compile:esm": "tsc --outDir ./build/esm --module node16 --moduleResolution node16", "compile:types": "tsc --outDir ./build/types --declaration --emitDeclarationOnly --module nodenext --moduleResolution nodenext", "compile": "yarn compile:cjs && yarn compile:esm && yarn compile:types", }

I tried to change the export in my index.ts to export * from './OFIcon, export {OFIcon} from './OFIcon but none of them worked. I am not sure what the issus is, but I suspect it could be due to the fact that its looking at the index.js file rather then the OFIcon.js file which actually holds the component. But that shouldnt really matter since the index.js exports it.

I also tried to import like this import OFIcon from '@oneface-react/oficon but it didnt work. I got a syntax error saying JSX element type 'OFIcon' does not have any construct or call signatures. I also dont want to import like this, because I might have multiple exports sometimes.

Anybody know how I can fix this?