How to React Typescript Functional Component Library?

Question

I hope someone can tell me where I am going wrong in trying to get usable libraries I have created a NPM project using create-react-app --format typescript, I then created the following structure:

|->tsconfig.json
|->package.json
|->config
   |->tsconfig.base.json
   |->tsconfig.cjs.json
   |->tsconfig.esm.json
|->src
   |->index.tsx 
   |->components 
      |->index.ts 
      |->ExampleComponent 
         |->ExampleComponent.component.tsx 
         |->ExampleComponent.stories.tsx 
         |->ExampleComponent.types.ts 
         |->index.ts

In this example the Example Component looks something like the following:

   |->tscon
import React, { FC } from 'react';
// Contact specific icons
import Container from 'react-bootstrap/Container';
// Footer Properties
import { ExampleProperties } from './ExampleComponent.types';

export const ExampleComponent: FC<ExampleProperties> = ({ text }) => {
    return (<Container fluid>{text}</Container>);
};

for the tsconfig files in 'config' I've lifted the Synk recommendation directly, while tsconfig.json is fairly simple like so:

{
    "extends": "./configs/tsconfig.esm.json",
}

If I start the application via 'npm start' I get a website and the component correctly appears, but the issue is trying to import into another project. I using npm link and npm link @Example/ExampleProject to bring the project in to another website and the index.tsx of that project looks like so:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ExampleComponent } from '@Example/ExampleProject';

const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element') const root = createRoot(container);

root.render( 
  <React.StrictMode>
    <main role={"main"} >
  <ExampleComponent/>
</main>
</React.StrictMode> );

But when it starts I am getting this error:

Module not found: Error: Can't resolve './ExampleComponent/index' in  '/home/user/IdeaProjects/ExampleProject/dist/esm' Did you mean 'index.mjs'? BREAKING CHANGE: The request './Common/index' failed to resolve only  because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module  with javascript mimetype, a '*.mjs' file, or a '*.js' file where the  package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

The only thing I can think is tsc generates src/components/index.ts as a /src/component/index.js (which I rename). But ExampleComponent has .js and .mjs files within its directory

How to React Typescript Functional Component Library?

0 Answers0