[React] Vite can't resolve the entries for the package

[Guipsss]

I'm getting this error when trying to run my application after installing the package.

> vite


ERROR  error when starting dev server:                                                                                                                                                                                                                             13:03:03
Error: Failed to resolve entry for package "@heroicons/react". The package may have incorrect main/module/exports specified in its package.json: Missing "." export in "@heroicons/react" package
    at packageEntryFailure (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21822:11)
    at resolvePackageEntry (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21817:9)
    at tryNodeResolve (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21557:20)
    at Context.resolveId (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:21321:28)
    at Object.resolveId (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:41407:46)
    at async reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:61709:21
    at async addManuallyIncludedOptimizeDeps (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:42860:31)
    at async createDepsOptimizer (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:42052:9)
    at async initDepsOptimizer (reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:41963:9)
    at async reactapp/node_modules/vite/dist/node/chunks/dep-0bae2027.js:61126:17

Adding a default export for ., as shown bellow, fixes it.

{
  "name": "@heroicons/react",
  "license": "MIT",
  "version": "2.0.15",
  "description": "",
  "keywords": [],
  "homepage": "https://github.com/tailwindlabs/heroicons#readme",
  "repository": {
    "type": "git",
    "url": "https://github.com/tailwindlabs/heroicons.git"
  },
  "files": [
    "20",
    "24",
    "solid",
    "outline"
  ],
  "sideEffects": false,
  "exports": {
    ".": {
      "default": "./package.json"
    },
    "./package.json": {
      "default": "./package.json"
    },
    // Rest of exports
  },
  "publishConfig": {
    "access": "public"
  },
  "peerDependencies": {
    "react": ">= 16"
  }
}

[thecrypticace]

What version of Vite are you using?

[Guipsss]

@thecrypticace version 4.0.3

[vskolos]

Faced the same issue today using Vite 4.1.1. Can confirm that adding a default export for . solves it.

[thecrypticace]

Can you tell me what your imports and Vite config look like? I am unable to reproduce this problem. (I will note that you cannot import from @heroicons/react but only from one of it's sub-packages: @heroicons/react/20/solid, @heroicons/react/24/solid, @heroicons/react/24/outline — but this is not a new limitation)

@Guipsss @vskolos Also is there any chance either or both of you could provide reproduction repos?

[thecrypticace]

Ah I think I've figured out what the issue is — this isn't a new problem at all but just an issue with the way optimizeDeps works in Vite. Working on a fix!

[ashusnapx]

The error message suggests that the package @heroicons/react is missing a default export, which can be fixed by adding one in its package.json file.

To fix this error, you can follow these steps:

1. Locate the package.json file for the @heroicons/react package in your project's node_modules directory.

2. Add the following code block to the exports field in the package.json file for @heroicons/react:

".": { "default": "./package.json" },
This specifies a default export for the package.

3. Save the package.json file and try running your application again.
   If you still experience issues, try deleting the node_modules directory and reinstalling the package using the following command:
   npm install @heroicons/react
4. npm install @heroicons/react

This should download the latest version of the package, including the newly added default export.

[Guipsss]

@thecrypticace awesome.
When is the new release going to be available so I can update the package?

[thecrypticace]

I've addressed the problem in #936. Basically, Vite's optimizeDeps feature requires a package have a root-level import even when it's not ever going to be used.

@Guipsss can you test the insiders build and let me know if the problem has been fixed for you? npm install @heroicons/react@insiders

[Guipsss]

@thecrypticace yes, it's fixed using the insiders build.
Running locally, building and running storybook are all fixed now.

[thecrypticace]

@Guipsss excellent — thanks for the confirmation! I've published v2.0.16 with the fix.

[Guipsss]

@thecrypticace awesome. Thank you so much!