App reviews, troubleshooting, and recommendations
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); };
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);
});
}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025