importmaps: Couldn't find any packages in ["@heroicons/react"] on jspm

[johnnyicon]

I am setting up a new Rails 7 project and using the package manager that it ships with: importmaps. It uses the jspm service to find packages.

To install a package, instead of npm i <package>, one runs ./bin/importmap pin <package>.

When I run ./bin/importmap pin @heroicons/react the following is returned:

Couldn't find any packages in ["@heroicons/react"] on jspm

Using the jspm generator, the @heroicons/react can be found, but there are no default package exports to be imported.

See https://generator.jspm.io/#a2VhYGBwyEgtys9Mzs8r1i9KTUwuYQAA9IZRvBYA

Using the jspm generator, I can manually select a package to export, and it presents four options:

1. ./outline
2. ./outline/PhotographIcon
3. ./solid
4. ./solid/XCircleIcon

Not sure if this is what I want.

[mhenrixon]

Having the same issue, been trying everything and it used to work

[adamwathan]

Hey folks! It's correct that @heroicons/react doesn't export anything on its own, you are meant to import things from @heroicons/react/outline or @heroicons/react/solid.

This is how we show it being used in the documentation:

import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

So you want to explicitly use @heroicons/react/outline or @heroicons/react/solid, not just @heroicons/react.

I've never used this JSPM generator but my guess is you want to configure it like this:

Hope that helps!