Can't lazy load my lib component - component doesn't exist on type

Question

I am converting a component library to use type: module in the package.json along with reorganising the structure and I'm now seeing that I can't lazy load my component within another repo...

I am importing the component from my lib into my project via:

const MyComponent = React.lazy(() =>
    import('@company_name/my-library').then((module) => ({
      default: module.MyComponent
    })
);

There have been no drastic changes to the structure of my LIB other than reorganising some files into their own directories and since I'm making it a module, introducing index files etc.

Note: I am currently bringing the LIB in via npm link as I am prototyping and haven't merged anything yet, however doing the same to another established component library doesn't seem to have any issues...

My IDE is showing a red squiggly underneath the module.MyComponent with the message:

TS2339: Property 'MyComponent' does not exist on type '{ default: typeof import("/Users/username/git/my-library/dist/index"); }'.

File structure:

LIB/src/index.ts

export * from './my-component';

LIB/src/my-component/index.tsx

const MyComponent = () => {
    /* component code */
};
export default MyComponent;

I am building the project with tsc and it does produce a /dist folder like:

.
└── my-library/
    ├── dist/
    │   ├── my-component/
    │   │   ├── index.d.ts
    │   │   └── index.js
    │   ├── ...
    │   ├── index.d.ts
    │   └── index.js
    └── src/
        ├── my-component/
        │   ├── index.tsx
        │   └── ...
        ├── ...
        └── index.ts

Answer 1

The issue came from me following the format of the previously established library lazy import, as that library used named exports rather than default.

After reading a bit more, I found that I could get my lazy loading working with

const MyComponent = React.lazy(() => import('@company_name/my-library/dist/my-component'));