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 ('<URL>') does not match the recipient window's origin ('<URL>').  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(
      <RemixServer
        context={remixContext}
        url={request.url}
        abortDelay={ABORT_DELAY}
      />,
      {
        [callbackName]: () => {
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);

          responseHeaders.set("Content-Type", "text/html");
          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            })
          );
          pipe(body);
        },
        onShellError(error) {
          reject(error);
        },
        onError(error) {
          responseStatusCode = 500;
          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}