ozzyonfire / shopify-next-app

Shopify app template on Next.js with app directory
https://shopify-next-app-six.vercel.app
MIT License
64 stars 7 forks source link

Next.js 14: shopify.auth.begin throws TypeError: Cannot read properties of undefined (reading 'getRandomValues #5

Closed jjrise closed 10 months ago

jjrise commented 10 months ago

I'm using Next.js 14.0.1 with the app router and get the following error in my auth endpoint if I use the provided next-adapter.ts:

TypeError: Cannot read properties of undefined (reading 'getRandomValues

If I don't use the provided next-adapter.ts and instead use the normal "@shopify/shopify-api/adapters/node" I get the following error:

TypeError: adapterArgs.rawResponse.getHeaders is not a function

Any insight here would be greatly appreciated!

EDIT: this repo is an excellent idea... I wish this was around back when I created my first Shopify app!

// import "@shopify/shopify-api/adapters/node";
import "../../../../lib/adapter";

import { shopifyApi, LATEST_API_VERSION } from "@shopify/shopify-api";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest, res: NextResponse) {
  try {
    const shopify = shopifyApi({
      apiKey: process.env.SHOPIFY_CLIENT_ID as string,
      apiSecretKey: process.env.SHOPIFY_SECRET as string,
      apiVersion: LATEST_API_VERSION,
      scopes: [
        "read_products",
        "write_products",
        "read_orders",
        "write_orders",
        "read_assigned_fulfillment_orders",
        "write_assigned_fulfillment_orders",
        "read_fulfillments",
        "write_fulfillments",
      ],
      hostName: process.env.NEXT_PUBLIC_APP_BASE_URL as string,
      isEmbeddedApp: false,
    });

    const searchParams = req.nextUrl.searchParams;
    const shop = searchParams.get("shop");

    const sanitizedShop = shopify.utils.sanitizeShop(shop as string);

    if (!sanitizedShop) {
      throw new Error("Invalid shop provided");
    }

    return beginAuth(sanitizedShop, req);

    function beginAuth(shop: string, req: Request) {
      return shopify.auth.begin({
        shop,
        callbackPath: "/api/shopify/callbackAuth",
        isOnline: false,
        rawRequest: req,
        rawResponse: new NextResponse(),
      });
    }
  } catch (error: any) {
    console.log(error);

    return new Response(error.message || "An unexpected error occurred", {
      status: 500,
    });
  }
}
jjrise commented 10 months ago

well, should've tried updating the shopify-api package before opening this issue, but that seems to have solved it. I'll close this issue if it ends up working.