Ecommerce Shopify WordPress Discussion

TypeError With REST Client In Shopify Remix App [closed]

Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 7 days ago. Improve this question I'm currently developing a Shopify app using the Remix.run framework and have encountered an issue I can't seem to resolve. I'm experiencing a TypeError related to the Shopify REST client within my Remix.run app, and despite following the Shopify documentation closely, I'm stuck. I'm hoping to get some insights or suggestions from the community. When running my app, I encounter the following error: TypeError: Cannot read properties of undefined (reading 'shop') at new RestClient (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/lib/clients/rest/rest_client.ts:31:35) at new RestResourceClient (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-app-remix/build/cjs/server/clients/admin/rest.js:122:10) at Function.<anonymous> (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/base.ts:105:20) at Generator.next (<anonymous>) at /Users/michaelbattaglia/sparky/node_modules/tslib/tslib.js:169:75 at new Promise (<anonymous>) at Object.__awaiter (/Users/michaelbattaglia/sparky/node_modules/tslib/tslib.js:165:16) at Function.request (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/base.js:30:24) at Function.<anonymous> (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/admin/2023-10/abandoned_checkout.ts:60:33) at Generator.next (<anonymous>) This error appears when I try to fetch data from Shopify, such as abandoned checkouts or shop details. Here's a minimal example that reproduces the issue: shopify.server.jsx import "@shopify/shopify-app-remix/adapters/node"; import { shopifyApp, LATEST_API_VERSION } from "@shopify/shopify-app-remix/server"; import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma"; import { restResources } from "@shopify/shopify-api/rest/admin/2023-10"; import prisma from "./db.server"; const shopify = shopifyApp({ apiKey: process.env.SHOPIFY_API_KEY, apiSecretKey: process.env.SHOPIFY_API_SECRET || "", apiVersion: LATEST_API_VERSION, scopes: process.env.SCOPES?.split(","), appUrl: process.env.SHOPIFY_APP_URL || "", sessionStorage: new PrismaSessionStorage(prisma), restResources, }); export async function fetchAbandonedCheckouts(admin) { const response = await admin.rest.resources.AbandonedCheckout.checkouts({ session: admin.session, }); return response.body.checkouts; } // Function to fetch shop details export async function fetchShopDetails(admin) { try { console.log("Session details:", admin.session); // Log session details const response = await admin.rest.get({ path: 'shop' }); return response.body.shop; } catch (error) { console.error("Error fetching shop details:", error); throw error; } } // Function to fetch orders export async function fetchOrders(admin) { try { const response = await admin.rest.resources.Order.all(); return response.body.orders; } catch (error) { console.error("Error fetching orders:", error); throw error; } } export default shopify; And here's how I'm trying to fetch abandoned checkouts: Part of shopify.server.jsx export async function fetchAbandonedCheckouts(admin) { try { console.log("Session details:", admin.session); const response = await admin.rest.resources.AbandonedCheckout.checkouts({ session: admin.session, }); return response.body.checkouts; } catch (error) { console.error("Error fetching abandoned checkouts:", error); throw error; } } For context, the error appears in the terminal logs as follows: [Terminal Output] 10:25:56 │ remix │ Session details: undefined 10:25:56 │ remix │ Shop Details: undefined 10:25:56 │ remix │ Error fetching abandoned checkouts: TypeError: Cannot read properties of undefined (reading 'shop') ... I've tried to follow the official Shopify documentation for setting up a Remix.run app as best as I can, and have simplified the data-fetching functions to ensure basic connectivity -- but still facing these issues. I'm particularly puzzled by the session details: undefined log, which suggests a problem with the session handling or authentication process. Maybe it shouldn't be reading shop in this case? Has anyone experienced a similar issue or is there a potential misstep here in my setup? Are there any additional configurations I'm missing? Happy to share more code snippets for context here, to me it seems like the session is not correctly established or my REST client isn't configured properly for my context. What I've Tried: Ensured environment variables are correctly set. Simplified the data-fetching function to isolate the issue. Checked the session details which log as undefined, hinting at a possible session or authentication issue. Expected Result: Successful data fetching from the Shopify API. Actual Result: TypeError related to the Shopify REST client. Edit: I have added snippets from my terminal when i run the app and preview it, as well as what I am seeing in my browser's console. Terminal: 15:04:42 │ remix │ Error fetching abandoned checkouts: TypeError: Cannot read properties of undefined (reading 'shop') 15:04:42 │ remix │ at new RestClient (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/lib/clients/rest/rest_client.ts:31:35) 15:04:42 │ remix │ at new RestResourceClient (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-app-remix/build/cjs/server/clients/admin/rest.js:122:10) 15:04:42 │ remix │ at Function.<anonymous> (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/base.ts:105:20) 15:04:42 │ remix │ at Generator.next (<anonymous>) 15:04:42 │ remix │ at /Users/michaelbattaglia/sparky/node_modules/tslib/tslib.js:169:75 15:04:42 │ remix │ at new Promise (<anonymous>) 15:04:42 │ remix │ at Object.__awaiter (/Users/michaelbattaglia/sparky/node_modules/tslib/tslib.js:165:16) 15:04:42 │ remix │ at Function.request (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/base.js:30:24) 15:04:42 │ remix │ at Function.<anonymous> (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/admin/2023-10/abandoned_checkout.ts:60:33) 15:04:42 │ remix │ at Generator.next (<anonymous>) 15:04:42 │ remix │ TypeError: Cannot read properties of undefined (reading 'shop') 15:04:42 │ remix │ at new RestClient (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/lib/clients/rest/rest_client.ts:31:35) 15:04:42 │ remix │ at new RestResourceClient (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-app-remix/build/cjs/server/clients/admin/rest.js:122:10) 15:04:42 │ remix │ at Function.<anonymous> (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/base.ts:105:20) 15:04:42 │ remix │ at Generator.next (<anonymous>) 15:04:42 │ remix │ at /Users/michaelbattaglia/sparky/node_modules/tslib/tslib.js:169:75 15:04:42 │ remix │ at new Promise (<anonymous>) 15:04:42 │ remix │ at Object.__awaiter (/Users/michaelbattaglia/sparky/node_modules/tslib/tslib.js:165:16) 15:04:42 │ remix │ at Function.request (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/base.js:30:24) 15:04:42 │ remix │ at Function.<anonymous> (/Users/michaelbattaglia/sparky/node_modules/@shopify/shopify-api/rest/admin/2023-10/abandoned_checkout.ts:60:33) 15:04:42 │ remix │ at Generator.next (<anonymous>) Console: Access to fetch at 'https://destinations.shopifysvc.com/destinations/api/2020-07/graphql' from origin 'https://mr-worldwidepittbul.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. destinations.shopifysvc.com/destinations/api/2020-07/graphql:1 Failed to load resource: net::ERR_FAILED main-19ae809c9d9e4a2f.js:1 [Network Error (GlobalNav)]: undefined: Retrying... sparky-1:1 Access to fetch at 'https://destinations.shopifysvc.com/destinations/api/2020-07/graphql' from origin 'https://mr-worldwidepittbul.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. destinations.shopifysvc.com/destinations/api/2020-07/graphql:1 Failed to load resource: net::ERR_FAILED main-19ae809c9d9e4a2f.js:1 [Network Error (GlobalNav)]: undefined: Retrying... sparky-1:1 Access to fetch at 'https://destinations.shopifysvc.com/destinations/api/2020-07/graphql' from origin 'https://mr-worldwidepittbul.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. destinations.shopifysvc.com/destinations/api/2020-07/graphql:1 Failed to load resource: net::ERR_FAILED main-19ae809c9d9e4a2f.js:1 [Network Error (GlobalNav)]: TypeError: Failed to fetch app:1 Failed to load resource: the server responded with a status of 500 ()
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.