'Can't resolve specificy import on my package

I created a package with CRA, Typescript and Storybook.

There is some configs from my package.json:

"name": "@my-name/my-package",
  "version": "0.0.7",
  "main": "./dist/index.js",
  "exports": {
    ".": "./dist/index.js",
    "./interfaces": "./dist/interfaces",
    "./contexts": "./dist/contexts"
  },
  "types": "./dist/index.d.ts",
  "typesVersions": {
    "*": {
      "interfaces": [
        "./dist/interfaces/index.d.ts"
      ],
      "contexts": [
        "./dist/contexts/index.d.ts"
      ]
    }
  },

When I import like this, it's works fines:

import { Button } from '@my-name/my-package';
import { ButtonInterface } from '@my-name/my-package/interfaces';

But when I try to import like this:

import { ButtonContext } from '@my-name/my-package/contexts';

I get this error:

Module not found: Can't resolve '@my-name/my-package/contexts' in '/home/my-pc/Documents/my-project/src/pages/Home'

I really don't know why I can import interfaces, but can't import contexts.

I tried import the ButtonContext from my main entry point, and it's worked. But then I try to import it from "./contexts" entry, I get the module not found error.

Here is my tsconfig.json that I use to create the dist folder:

{
  "compilerOptions": {
    "declaration": true,
    "strictNullChecks": true,
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "lib": ["es2015", "dom"],
    "rootDir": "src",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": ["src"],
  "exclude": [
    "node_modules",
    "dist",
    "./src/stories",
    "./src/**/*.stories.**",
    "./src/mock",
    "./src/**/*.test.*",
    "./src/setupTests.ts"
  ]
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source