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

Shopify Apps
, , ,
1

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);
  };

post_message_error.png
post_message_error.png1365×554 68.7 KB

2

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(
3

According to https://github.com/Shopify/shopify-app-bridge/issues/215, the “Failed to execute ‘postMessage’ on ‘DOMWindow’:” issue was a bug in App Bridge that was fixed in version 3.5.1, so it’s possible Shopify fixed it on their side.

However that error doesn’t cause blank pages — I’m getting it and my app still loads.

I was seeing blank pages earlier today, but that was caused by my server having the wrong Shopify app keys, so I don’t think it was related to the postMessage error.