So I am in the process of authoring a typescript library for NPM. I have been successful in getting a single component of that library to import in the app I am using this package in. However, the problem arises when I try to import an enum which also gets exported from the same file that the component is declared in. I get hit with the following error.
Module not found: Can't resolve '@someorg/library/dist/Component/Component' in '/Users/someuser/project-dir/src/components/AnotherComponent'
I even get this error when referring directly to the node_modules and not using the package scope. Below is the general layout of my component.
// Component.tsx
import React, { Fragment } from 'react';
export enum SomeEnum {
a,
b,
c
}
type Props = {
aProp: SomeEnum
};
const Component = ({ aProp = SomeEnum.a }: Props) => {
// some code...
};
export default Component;
My project and dist folder structure look as follows:
project-dir
dist
Component
Component.d.ts
index.d.ts
index.es.js
index.js
src
Component
Component.tsx
index.tsx
It seems like the component has d.ts file generated and I thought that would make it work, but it doesn't recognized it at all.
I have tried several different things playing with the paths in the tsconfig.json and how includes are handled in the package.json. I have tracked down several different issues on github which seemed similar, but have not been able to figure this out. I can provide more info if needed please let me know I just wanted to keep this short. Below I have included the typescript configuration.
// tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"sourceMap": true,
"declaration": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": "./",
"paths": {
"library/*": [ "src/*" ]
},
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react",
"strict": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"],
"esModuleInterop": true
}