Can't import Tabler package in React app (Error: Package path . is not exported from package)

Question

I am importing some Tabler icons in a React component:

FeatureCards.tsx

import { IconGauge, IconUser, IconCookie } from '@tabler/icons';

Unfortunately I get the following error:

ERROR in ./src/components/FeatureCards.tsx 6:0-64

Module not found: Error: Package path . is not exported from package /xx/App/node_modules/@tabler/icons (see exports field in /xx/App/node_modules/@tabler/icons/package.json)

In /xx/App/node_modules/@tabler/icons/package.json, the export looks like:

  "exports": {
    "./*": [
      "./icons/*"
    ]
  },

I have tried changing it to..:

 "exports": {
    "./*": [
      "./icons/*"
    ],
    ".": "./icons"
  },

..per a suggestion online however this gives the new error:

Module not found: Error: Can't resolve '@tabler/icons' in '/xx/App/src/components'

I've also tried deleting and re-installing my node modules with no luck. I will downgrade for now assuming it's a version problem.

Thank you in advance for any suggestions.

Edit: downgrading tabler to 1.115.0 has rectified the issue for now.

npm  i @tabler/[email protected]

Answer 1

you should use @tabler/icons-react package