Module build failed: Error: ENOENT: no such file or directory, open 'node_modules/@heroicons/react/outline/esm/index.js'

[OnkelTem]

I import an icon as in the docs in a Next.js 12 project:

import { TrashIcon } from '@heroicons/react/24/solid'

and get the following error in the front-end:

ModuleBuildError: Module build failed: Error: ENOENT: no such file or directory, open '/path/to/project/node_modules/@heroicons/react/outline/esm/index.js'

[reinink]

Hey! Without a minimal reproduction (provided as a Git repo), it's nearly impossible for us to help in situations like this.

I've just tried using that exact import in a Next.js 12 project, and was able to render the trash icon without any issues. I tried in both development mode and in a production build.

The only thing I can think is that either the @heroicons/react package is not installed, or you're on an older version. Try installing the latest version:

npm install @heroicons/react@latest

Note, the imports changed in the latest version of this library. You can read more about those changes in the 2.0.0 release notes: https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0

Also, for what it's worth, I'm noticing that in the error message you're providing it's reporting "outline", but in your import you're using the "solid" icons, so that might be something to look at.

Happy to look at this again if you're able to provide a minimal reproduction as a Git repo.

Hope that helps! 🤙