1
votes

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
}