Seeking Expertise in Resolving Unknown Error with Next.js Shopify Integration on

Technical Questions Shopify
,
1

Hello Builder Community,

We are currently engaged in a project involving Builder.io and have recently downloaded the Next.js Shopify GitHub package from the official repository: Next.js Shopify GitHub Package. We meticulously followed all the provided instructions for integration.

However, we’ve hit a roadblock in the form of an unknown error message that seems to be related to handling an “Object,” specifically in dealing with the collection and product. The error message we are encountering is as follows:

⨯ Error: [object Object]
at getProperError (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/lib/is-error.js:41:12)
at DevServer.renderToResponseImpl (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/base-server.js:1903:53)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DevServer.pipeImpl (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/base-server.js:909:25)
at async NextNodeServer.handleCatchallRenderRequest (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/next-server.js:266:17)
at async DevServer.handleRequestImpl (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/base-server.js:805:17) {
  page: '/collection/hydrogen'
}


⨯ Error: [object Object]
at getProperError (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/lib/is-error.js:41:12)
at DevServer.renderToResponseImpl (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/base-server.js:1903:53)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async DevServer.pipeImpl (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/base-server.js:909:25)
at async NextNodeServer.handleCatchallRenderRequest (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/next-server.js:266:17)
at async DevServer.handleRequestImpl (/Users/brandonpowell/Desktop/nextjs-shopify/node_modules/next/dist/server/base-server.js:805:17) {
  page: '/product/the-3p-fulfilled-snowboard'
}

Unfortunately, this error message doesn’t provide sufficient details regarding the file where these issues are originating.

If you have experience working with Shopify and Builder.io, particularly in the realm of Shopify Headless Theme building, we would greatly appreciate your assistance. Our primary challenges lie in the generation of collections and product pages.

Any insights, suggestions, or guidance you can provide would be invaluable to us. Thank you in advance for your time and expertise.

Best regards,
Brandon Powell

2

Hello @xbrandonpowell,

We are unable to reproduce this error when using our Next.js Shopify GitHub repo. Would you be able to share the link and access for the Github repository?

3

Happy Holiday @manish-sharma,

Below I have shared my GitHub and noted I have updated all the packages that when the issues came up after updating all the packages that list:

4

Hello @xbrandonpowell,

Thank you for providing the repository. We’ve successfully replicated the issue on our end, and I will initiate an internal discussion to assess the situation and plan the next steps. I appreciate your patience.

Rest assured, I will keep you informed of any developments as we work towards resolving the issue. If you have any additional information or insights that could assist in the investigation, feel free to share them.

Thanks

1 Like
5

This suggestion from my developer friend emphasizes the importance of incorporating code comments into the project. This enhancement aims to improve code readability and ensure a better understanding of our work. Without comments, some individuals may find it challenging to comprehend the code.

Why do I ask if want to different form options that are not in the custom builder component where would we do that just idea for the next eCommerce project or future project feature components?

6

Hello @xbrandonpowell,

The Builder Visual editor allows you to seamlessly add comments to your content. Feel free to explore and leverage this enhanced functionality.

Screenshot 2023-12-28 at 3.31.59 PM
Screenshot 2023-12-28 at 3.31.59 PM2868×1280 261 KB

Presently, to incorporate distinct input options for the builder’s custom component, the process involves re-registering the component with the updated input specifications.

Thank you!

7

I was talking about within the code environment, not the Builder Visual Editor.

8

Hello @xbrandonpowell,

Thank you for providing clarifications. I’ll promptly share this valuable feedback with our team. We sincerely appreciate your suggestion.

Best regards,

1 Like