Error: Icon collection not found

rolanday commented 9 months ago

re: https://github.com/egoist/tailwindcss-icons/issues/16

Hi, this (^^) issue was closed but I'm getting the same error, running v1.2.0. Was working for a bit after some initial trouble getting transform to work, but then started seeing same error again though I didn't change my config (i.e., sometimes it works, sometimes it doesn't). Even installed the 50MB @iconify/json, and still no luck.

prettier error:

"ERROR" - 10:03:25 PM] Error formatting document.
["ERROR" - 10:03:25 PM] Icon collection "mdi" not found. Please install @iconify-json/mdi or @iconify/json
Error: Icon collection "mdi" not found. Please install @iconify-json/mdi or @iconify/json
    at /Users/<redacted>/node_modules/@egoist/tailwindcss-icons/dist/index.js:96:17
    at Array.reduce (<anonymous>)
    at getIconCollections (/Users/<redacted>/node_modules/@egoist/tailwindcss-icons/dist/index.js:93:22)
    at /Users/<redacted>/tailwind.config.ts:72:100
    at evalModule (/Users/<redacted>/node_modules/jiti/dist/jiti.js:1:255614)
    at jiti (/Users/<redacted>/node_modules/jiti/dist/jiti.js:1:253542)
    at /Users/<redacted>/node_modules/tailwindcss/lib/lib/load-config.js:37:30
    at loadConfig (/Users/<redacted>/node_modules/tailwindcss/lib/lib/load-config.js:39:6)
    at wG (file:///Users/<redacted>/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2384:38496)
    at oI (file:///Users/<redacted>/node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2384:37795)
["INFO" - 10:03:25 PM] Formatting completed in 65ms.

package.json:

...
  "dependencies": {
    "@aws-sdk/client-s3": "^3.421.0",
    "@aws-sdk/s3-request-presigner": "^3.421.0",
    "@paralleldrive/cuid2": "^2.2.2",
    "@remix-run/express": "^2.0.1",
    "@remix-run/node": "^2.0.1",
    "@remix-run/react": "^2.0.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "drizzle-orm": "^0.28.6",
    "drizzle-zod": "^0.5.1",
    "express": "^4.18.2",
    "framer-motion": "^10.16.4",
    "image-blob-reduce": "^4.1.0",
    "ioredis": "^5.3.2",
    "isbot": "^3.6.8",
    "morgan": "^1.10.0",
    "pg": "^8.11.3",
    "pino": "^8.15.3",
    "pino-pretty": "^10.2.0",
    "pretty-bytes": "^6.1.1",
    "react": "^18.2.0",
    "react-aria": "^3.28.0",
    "react-aria-components": "^1.0.0-beta.0",
    "react-dom": "^18.2.0",
    "react-stately": "^3.26.0",
    "remix-flat-routes": "^0.5.12",
    "source-map-support": "^0.5.21",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "ua-parser-js": "^1.0.36",
    "use-debounce": "^9.0.4",
    "use-places-autocomplete": "^4.0.1",
    "uuid": "^9.0.1",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@egoist/tailwindcss-icons": "^1.2.0",
    "@iconify-json/mdi": "^1.1.54",
    "@iconify-json/radix-icons": "^1.1.11",
    "@iconify/json": "^2.2.122",
    "@remix-run/dev": "^2.0.1",
    "@remix-run/eslint-config": "^2.0.1",
    "@types/compression": "^1.7.2",
    "@types/csso": "^5.0.1",
    "@types/express": "^4.17.17",
    "@types/google.maps": "^3.54.2",
    "@types/image-blob-reduce": "^4.1.2",
    "@types/morgan": "^1.9.4",
    "@types/pg": "^8.10.3",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@types/source-map-support": "^0.5.6",
    "@types/ua-parser-js": "^0.7.37",
    "@types/uuid": "^9.0.4",
    "@types/web": "^0.0.115",
    "@typescript-eslint/eslint-plugin": "^6.7.3",
    "autoprefixer": "latest",
    "bun-types": "^1.0.3",
    "chokidar": "^3.5.3",
    "csso": "^5.0.5",
    "drizzle-kit": "^0.19.13",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^9.0.0",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "latest",
    "typescript": "^5.1.6"
  },
...

tailwind.config.ts

import { iconsPlugin, getIconCollections } from "@egoist/tailwindcss-icons";

....
  plugins: [
    iconsPlugin({ collections: getIconCollections(["mdi", "radix-icons"]) }),
    require("tailwindcss-animate"),
  ],

prettier.config.cjs

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
  tailwindFunctions: ["clsx", "cn"],
};

System Info

macOS Sonoma v14
Node 18
bun package manager (note: tried reinstalling modules using npm, but same result)

rolanday commented 9 months ago

P.S. Should have noted that the transform itself is working fine. Issue is it's breaking prettier. Thanks for this btw! I'm coming back to tw from unocss, which has official support for iconify and it would be really sad to go back to including icons the old-fashioned way. You might want to point out in the README.md that the VS Code Iconify IntelliSense plug-in written by unocss creator Anthony Fu works well with this transform since it follows the same icon specifier notation: https://marketplace.visualstudio.com/items?itemName=antfu.iconify

hyoban commented 9 months ago

I noticed that the previous fix may only work if the tailwind configuration uses cjs

github-actions[bot] commented 9 months ago

:tada: This issue has been resolved in version 1.3.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

rolanday commented 9 months ago

Ty! That explains. I had working and then changed my twconfig to .ts, but didn't make the connection. Appreciate the fast turnaround!!

egoist / tailwindcss-icons

Error: Icon collection not found #26