Error after Mark Shipped

[arzzen]

Bug report

Describe the bug

after placed the order and confirm of fullfilment, the button Mark Shipped not work and end with an error

System information

"dependencies": { "@medusajs/admin": "^7.1.14", "@medusajs/cache-inmemory": "latest", "@medusajs/cache-redis": "^1.9.1", "@medusajs/event-bus-local": "latest", "@medusajs/event-bus-redis": "^1.8.13", "@medusajs/file-local": "^1.0.3", "@medusajs/inventory": "^1.11.6", "@medusajs/medusa": "^1.20.6", "@medusajs/stock-location": "^1.11.5", "@react-spring/web": "^9.7.3", "@rsc-labs/medusa-documents": "^0.8.3", "@tanstack/react-query": "4.22.0", "@visx/xychart": "^3.11.0", "body-parser": "^1.19.0", "cors": "^2.8.5", "dotenv": "16.3.1", "express": "^4.17.2", "medusa-fulfillment-manual": "^1.1.40", "medusa-interfaces": "latest", "medusa-payment-manual": "^1.0.24", "medusa-payment-stripe": "latest", "medusa-plugin-abandoned-cart": "^2.0.56", "medusa-plugin-blog": "^0.1.0", "medusa-plugin-dashboard": "^0.1.6", "medusa-plugin-reviews": "^1.0.0", "medusa-plugin-strapi-ts": "^5.0.22", "prism-react-renderer": "^2.0.4", "typeorm": "^0.3.16"

Node.js version: v18.20.3 Database: postgres Operating system: Linux Browser (if relevant): Chrome also Firefox

Steps to reproduce the behavior

1. Go to Orders
2. Click on Detail order
3. Scroll down to Fulfillment
4. Click on Mark Shipped
5. See error

Expected behavior

Mark order as shipped

Screenshots

Code snippets

n/a

Additional context

n/a

[manuel-schoebel]

I have the same problem. It comes from this part of the code:

const MarkShippedModal: React.FC<MarkShippedModalProps> = ({
  orderId,
  fulfillment,
  handleCancel,
}) => {
  const { t } = useTranslation()
  const { control, watch, handleSubmit } = useForm<MarkShippedFormData>({
    defaultValues: {
      tracking_numbers: [{ value: "" }],
    },
    shouldUnregister: true,
  })
  const [noNotis, setNoNotis] = useState(false)

  const {
    fields,
    append: appendTracking,
    remove: removeTracking,
  } = useFieldArray({
    control,
    name: "tracking_numbers",
  })

  const watchedFields = watch("tracking_numbers")

  // Allows us to listen to onChange events
  const trackingNumbers = fields.map((field, index) => ({
    ...field,
    ...watchedFields[index],
  }))

watchedFields gets undefined after a second rerender. And the you get a nullpointer in ...watchedFields[index]

Simple solution would be to just guard it. Also it is strange since tracking_numbers is set in the default values. I assume useFieldArray might do something with it via the "control".

As of right now you can just manually change the part in the .cache - at least for some local development.