Hello, I have problem with using "useField" hook in custom field components

wangzhijunlast year

2

• 

  zed0547last year

  Hey

  @812552249145688126

  👋

  
  
  

  Can you check that you don't have duplicate payload packages installed?

  
  
  

  pnpm why payload

• 

  wangzhijunlast year

  Hi, my project structure is like this

  
  
  

  payload-lucide-picker/
  ├── package.json # Plugin's package.json (needs proper dependency setup)
  ├── src/ # Plugin source code
  │ └── [Plugin implementation files]
  │
  ├── example/
  │ └── payload-lucide-picker-demo/
  │ ├── package.json # Contains dependencies like:
  │ │ # - payload: "latest"
  │ │ # - @payloadcms/ui: "latest"
  │ │ # - lucide-react: "^0.479.0"
  │ │ # - react: "19.0.0"
  │ │ # - next: "15.2.0"
  │ │
  │ └── [Next.js app files that demonstrate the plugin]
  

  
  

  payload-lucide-picker's dep is

  
  
  

  "peerDependencies": {
  "next": "^15.0.0",
  "react": "^19.0.0",
  "payload": "^3.2.2",
  "lucide-react": "^0.344.0"
  },
  "devDependencies": {
  "@types/node": "^20.11.24",
  "@types/react": "^19.0.0",
  "@payloadcms/ui": "^3.2.2",
  "@typescript-eslint/eslint-plugin": "^7.1.0",
  "@typescript-eslint/parser": "^7.1.0",
  "eslint": "^9.0.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-prettier": "^5.1.3",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "prettier": "^3.2.5",
  "rimraf": "^5.0.5",
  "sass": "^1.71.1",
  "tsup": "^8.0.2",
  "typescript": "^5.3.3"
  },
  

  
  

  payload-lucide-picker-demo 's dep is

  
  
  

  "dependencies": {

  
  

  "@payloadcms/db-postgres": "latest",

  
  

  "@payloadcms/next": "latest",

  
  

  "@payloadcms/payload-cloud": "latest",

  
  

  "@payloadcms/richtext-lexical": "latest",

  
  

  "@payloadcms/ui": "latest",

  
  

  "cross-env": "^7.0.3",

  
  

  "graphql": "^16.8.1",

  
  

  "lucide-react": "^0.479.0",

  
  

  "next": "15.2.0",

  
  

  "payload": "latest",

  
  

  "react": "19.0.0",

  
  

  "react-dom": "19.0.0",

  
  

  "sharp": "0.32.6"

  
  

  },

  
  

  "devDependencies": {

  
  

  "@eslint/eslintrc": "^3.2.0",

  
  

  "@types/node": "^22.5.4",

  
  

  "@types/react": "19.0.10",

  
  

  "@types/react-dom": "19.0.4",

  
  

  "@types/webpack": "^5.28.5",

  
  

  "css-loader": "^7.1.2",

  
  

  "eslint": "^9.16.0",

  
  

  "eslint-config-next": "15.2.0",

  
  

  "prettier": "^3.4.2",

  
  

  "sass-loader": "^16.0.5",

  
  

  "style-loader": "^4.0.0",

  
  

  "typescript": "5.7.3"

  
  

  },

  
  
  

  I think there is no duplicate payload packages installed (not so sure)

  
  
  

  yes, pnpm generate:types, also report this error

  
  
  

  after hours testing, I found that it is because this line

  
  

  export { Icon as LucideDynamicIcon } from './fields/component/index';

  
  
  

  I removed it, and it works well, but I still do not know the root cause.