I’ve written a large component library with various top-level folders like api, components, utils etc. During initial development I used exports in package.json to define convenient entry locations that my code could be imported from, like <package>/utils. But I had these exports pointing to the /src folder, not to the /dist folder produced by webpack.

Now I am trying to figure out how to properly package my library – and do so in a manner that supports my ability to use sub-paths to avoid otherwise very tedious code to pull out nested type definitions.

I moved away from exports as I got into issues with react and other things getting multiple, distinct instances when importing. My current approach is to instead just use the one bundled file /dist/main.js.

This partially works. This allows me to import from sub-paths via the dist folder like so: import {...} from '<package>/dist/sub/path'.

This will successfully import the type information from my component library for re-use in other projects. However, when I actually go to compile a project that uses the library, I get errors like this one:

ERROR in ./src/redux/store.tsx 17:14-48
Module not found: Error: Can't resolve '<package>/dist/redux' in '/home/user/repos/<some-project>/src/redux'
 @ ./src/app.tsx 11:14-38
 @ ./src/index.tsx 34:28-44 54:15-39

While the /dist folder maintains the same folder structure as /src, and while it contains all of the type definition files (*.d.ts), the only javascript file is the one bundled by webpack: /dist/main.js

I’m guessing that the reason my compilation attempts are failing is because it is looking for a corresponding index.js file under the specified sub-path and isn’t finding it – resulting in the error.

How I can package this library in such a way as to properly support sub-paths for imports?