Nextjs error "Cancel rendering route" when navigating checkout

Support
#1

Hi,

I’m following the simple NextJS tutorial (Next.js E-Commerce SPA Tutorial for Developers [Live Example]) and I’m running into an error when navigating back from the checkout page. If I go to cart > view detailed cart > checkout and click “continue shopping” when the modal closes I get “Error: Cancel rendering route”. Not sure how Snipcart cart handles routing, but it seems to be creating some conflict. This is a simple single page shopping page and I’m using the example code pretty much verbatim.

Any ideas?

1 Like
#2

Hi @itsgalo - I am having the exact same problem, in my snipcart solution. - Its crazy becuase its so basic.

Did you manage to find a fix for this? It is driving me crazy.

The only thing that I think I might be able to do is to override the continue shopping link and send the user to a specfic page in the website.

If anyone from the snipcart team sees this, please look in to it.

Such a basic problem is stoping us going live with our new website.

#3

I would like to address an issue I have encountered while working with Snipcart in conjunction with Next.js, and seek your assistance. Firstly, @itsgalo , could you kindly clarify the specific version of Snipcart you are experiencing this issue with?

Initially, I faced difficulties when using Next.js with Snipcart version 3.5. After investing several additional hours into resolving this matter, I decided to upgrade to the latest available version of Snipcart, namely 3.6.1. Additionally, I modified the cart’s style to appear on the side whenever an item is added.

Although the error has not been completely resolved, it no longer occurs consistently. This indicates some improvement, albeit the root cause of this error remains elusive to me.

This lack of clarity surrounding the installation process, particularly when integrating Snipcart with Next.js, is indeed perplexing. When installing Snipcart with Next.js, there are two approaches: the older method and the new approach.

The older method is outlined in the example you provided: Next.js E-Commerce SPA Tutorial for Developers [Live Example]. However, starting from version 3.4.0, a new method of installation has been introduced, as documented in the release notes: Release notes – Snipcart Documentation. Unfortunately, there are no official tutorials or examples demonstrating the proper procedure for installing Snipcart with Next.js when utilizing the new method.

To illustrate this point, I would like to reference two posts from developers who are also attempting to determine the correct method of inserting the Snipcart code into a Next.js application:

  1. Stack Overflow post: javascript - Snipcart and NextJS installation - Stack Overflow
  2. Snipcart support forum post: How are you implementing the new Snipcart installation method in Next.js?

This lack of clarity surrounding the installation process, particularly when integrating Snipcart with Next.js, is indeed perplexing. Specifically, if one follows the old installation method with a Snipcart version lower than 3.4.0, the error or problem I have described does not arise.

Considering the widespread usage of Next.js as a framework, it is essential for Snipcart to provide a well-documented example of the correct, recommended, and thoroughly tested technique for installing Snipcart with Next.js. I find this situation immensely frustrating.

On a positive note, it appears that utilizing the latest version of Snipcart (3.6.1) largely resolves the aforementioned problem. However, I must express my disappointment with the Snipcart team regarding this matter. The installation process is a fundamental aspect that warrants close attention. It is imperative for them to thoroughly assess the compatibility of version 3.5 with Next.js and document any associated issues, eliminating the need for guesswork.

#4

Unfortunately, I was not able to find a solution and decided not to use Snipcart for my site. It really is a shame that there’s a lack of support because it’s a very elegant cart implementation.

#5

For me this problem went away in the end, I’m not 100% sure why, I think it may have been something to do with the fact I had next.Js site running in a docker container. I know that shouldn’t make a difference but for some reason I just don’t see that problem anymore.

I have been using snipcart for 4 years now, and I must admit I love it, but I hate it at the same time.

I agree with you there are some key features that it’s missing such as Apple Pay and Google Pay, and though it has many ways to customise things, it just missing a few little key things.

For now I’m sticking with it, but I have been looking at other options too.