Support ESM projects

[Hyeseong Kim]

cannot use in SSR + ESM environment

node:internal/process/esm_loader:79
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/tim/Workspace/src/github.com/daangn/council/node_modules/@heroicons/react/24/outline' is not supported resolving ES modules imported from /Users/tim/Workspace/src/github.com/daangn/council/api/dist/server.js
Did you mean to import @heroicons/react/24/outline/index.js?
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:224:17)
    at moduleResolve (node:internal/modules/esm/resolve:850:10)
    at defaultResolve (node:internal/modules/esm/resolve:1058:11)
    at nextResolve (node:internal/modules/esm/loader:164:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:419:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36

[Wassim]

Temporary fix:

import { icon } from '@heroicons/react/24/outline/esm/index.js'

[Jonathan Reinink]

Hey! Can you provide a minimal reproduction for this as a Git repo?

This should work, as we do ship an ESM version, which you can see in the package.json file:

https://unpkg.com/browse/@heroicons/react@2.0.13/24/solid/package.json

You can also see the ESM versions of the icons here:

https://unpkg.com/browse/@heroicons/react@2.0.13/24/solid/esm/

So I suspect this probably has something to do with your particular project setup, which is why the minimal reproduction is important 👍

Thanks!

[Jordan Pittman]

Hey! I've merged a change in #920 that should enable this to work. Bare ESM requires the use of extensions unless a package provides an exports field with what amounts to an import map. It will be available in our next tagged release (possibly today but if not it will happen this week).