Error with messaging

import type { PlasmoMessaging } from "@plasmohq/messaging"

const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
  console.log("Ping message received", req.body.id)
  const message = "Pong!"

  res.send({
    message
  })
}

export default handler

import type { PlasmoCSConfig } from "plasmo"

import { sendToBackground } from "@plasmohq/messaging"

export const config: PlasmoCSConfig = {
  matches: ["https://www.google.com/*"],
  world: "MAIN",
  run_at: "document_end"
}

async function ping() {
  console.log("Component in real world")
  const resp = await sendToBackground({
    name: "ping",
    body: {
      id: 123
    },
    extensionId: "dbihgacbiojmefppibfimnmpabpifldj" // find this in chrome's extension manager
  })

  console.log(resp)
}

setInterval(ping, 1000)