Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist only on production mode in ReactJS application

Question

I'm building a chrome extension. My target is to sync data from my React web application to the Chrome extension. I used externally_connectable to send the data from my web app to the extension.

Web app:

window.chrome.runtime.sendMessage(
  CHROME_EXTENSIONS_ID,
  { credential: credential },
  () => {}
)

Background script on extension

chrome.runtime.onMessageExternal.addListener(function (
  request,
  sender,
  sendResponse
) {
  // receive the token and refresh token from commenty
  if (request.credential) {
    // do some stuff with request.credential
  }
});

My local app working on domain: local.v2.context.app, my development server working on dev.context.app and production server context.app

manifest.json*

  "externally_connectable": {
    "ids": ["*"],
    "matches": ["https://*.context.app/*"],
    "accepts_tls_channel_id": false
  },

Everything works fine on my localhost with a local server with a custom domain. But when I tried to run the extension with the development and the production server isn't working, get the error:

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

My web app was built with create-react-app. I think the error is somewhere in the way I set the manifest.json but I still can't figure out what the correct config is. Please can you give me some solution?

Thanks