Application error: a client-side exception has occurred (see the browser console for more information).

[DanielHirunrusme]

I'm trying to use the icon picker with my v3 studio. It works on localhost but when deployed to Vercel crashes the studio with error message: Application error: a client-side exception has occurred (see the browser console for more information).

Using a basic Vercel + Sanity blog starter. Here is my package.json

  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next",
    "format": "npx prettier --write . --ignore-path .gitignore --cache",
    "lint": "next lint -- --ignore-path .gitignore",
    "lint:fix": "npm run format && npm run lint -- --fix",
    "start": "next start",
    "type-check": "tsc --noEmit"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@material-tailwind/react": "^2.0.4",
    "@portabletext/react": "3.0.2",
    "@sanity/code-input": "^4.1.1",
    "@sanity/color-input": "^3.1.0",
    "@sanity/image-url": "1.0.2",
    "@sanity/table": "^1.0.1",
    "@sanity/vision": "3.12.0",
    "@sendgrid/mail": "^7.7.0",
    "@typeform/embed-react": "^2.22.0",
    "@vercel/og": "0.5.7",
    "classnames": "^2.3.2",
    "date-fns": "^2.30.0",
    "font-awesome": "^4.7.0",
    "framer-motion": "^10.12.17",
    "intl-segmenter-polyfill": "0.4.4",
    "next": "13.4.4",
    "next-sanity": "4.3.3",
    "nextjs-google-analytics": "^2.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-fast-marquee": "^1.6.0",
    "react-intersection-observer": "^9.5.1",
    "react-lowlight": "^3.0.0",
    "react-refractor": "^2.1.7",
    "react-string-replace": "^1.1.1",
    "react-syntax-highlighter": "^15.5.0",
    "sanity": "3.12.0",
    "sanity-plugin-asset-source-unsplash": "1.1.0",
    "sanity-plugin-icon-picker": "^3.2.1",
    "suspend-react": "0.0.10",
    "swiper": "^9.4.1",
    "swr": "2.1.5",
    "tailwind-fontawesome": "^0.5.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.1",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.39.0",
    "eslint-config-next": "13.4.4",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-packagejson": "^2.4.3",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  },
  "engines": {
    "node": ">=16"
  }
}

[christopherafbjur]

Hi @DanielHirunrusme please check the solution here #33

[christopherafbjur]

Added this to FAQ in #56