When I send a message from content to background, I am getting this error in the content script log (chrome console log):

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

In the service worker log, nothing is being logged when I send message fronm content. Below are my backgroundScript, contentScript, and my manifest.json. I am using manifest v3.

backgroundScript.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
      console.log('request: ', request);
});

contentScript.js

chrome.runtime.sendMessage({ greeting: 'hello' });

manifest.json

{
  "manifest_version": 3,
  "name": "Chrome Extension with React & Webpack",
  "description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
  "options_page": "options.html",
  "background": { "service_worker": "background.bundle.js" },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon-34.png"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "icons": {
    "128": "icon-128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
      "js": ["contentScript.bundle.js"],
      "css": ["content.styles.css"]
    }
  ],
  "host_permissions": ["http://*/"],
  "devtools_page": "devtools.html",
  "web_accessible_resources": [
    {
      "resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
      "matches": []
    }
  ]
}