Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match

[Ponmari]

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘’) does not match the recipient window’s origin (‘’). in the console of my shopify app. which shows blank page on all the pages of my shopify app.

Can anyone give solution to my error, I have been stuck in this for two days.

Here is my code,

import { json } from "@remix-run/node";
import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import { authenticate } from "../shopify.server";

import { Page, Layout,Button, Form, FormLayout, TextField, Card,RadioButton } from "@shopify/polaris";
import {useState, useCallback} from 'react';

export const links = () => [{ rel: "stylesheet", href: polarisStyles }];

export const loader = async ({ request }) => {
  await authenticate.admin(request);

  return json({ apiKey: process.env.SHOPIFY_API_KEY || "" });
};

export default function Apptopay() {
    const { apiKey } = useLoaderData();
  
    return (
      <Page
      backAction={{content: 'Settings', url: '#'}}
      title="Apptopay Configuration Settings"
      primaryAction={<Button variant="primary">Save</Button>}
    >
      <Card>
      <Form >
        <TextField label="Authentication Key" type="text" 
        align="right" />
        <TextField label="Retailer ID" type="text" />
        <TextField label="Retailer GUID" type="text" />
        <TextField label="Product ID" type="text" />
        <TextField label="Product GUID" type="text" />
 
      </Form>
     </Card>
     </Page>
    );
}

// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
    return boundary.error(useRouteError());
  }
  
  export const headers = (headersArgs) => {
    return boundary.headers(headersArgs);
  };

[Ponmari]

Finally I fixed it, To my knowledge I don’t know exactly what went wrong. I have already changed my entry.server.tsx file name to entry.server.ts for some other bug , and edited the code inside it.

I removed that, and changed the filename to entry.server.tsx

Here is the code for entry.server.tsx

Can someone explain the what went wrong and what is happening in entry.server.tsx file?

import { PassThrough } from "stream";
import { renderToPipeableStream } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import {
  createReadableStreamFromReadable,
  type EntryContext,
} from "@remix-run/node";
import { isbot } from "isbot";
import { addDocumentResponseHeaders } from "./shopify.server";

const ABORT_DELAY = 5000;

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  addDocumentResponseHeaders(request, responseHeaders);
  const callbackName = isbot(request.headers.get("user-agent") || "")
    ? "onAllReady"
    : "onShellReady";

  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(