Next data json malformed for non-listed items

Question

Next data json malformed for non-listed items

tmechsner opened this issue 3 years ago · comments

What I'm trying to achieve

I want to create a production build. Backend and Storefront build process run without errors. Deployment via docker. I can see the landingpage, add products to the cart etc. - almost everything seems to work fine so far. However, for some of the products I cannot view the product detail page: "An unexpected error has occurred."

It seems like next does not build the static page content successfully. The problematic request, for example in my case for the seaman beer, goes to https://my-domain/_next/data/WsXrOHPdIWvUjVMk__MLx/product/seaman-beer.json.
The response should be pure json. I compared the corresponding request when viewing other products (for example https://my-domain/_next/data/WsXrOHPdIWvUjVMk__MLx/product/nebula-night-sky-paint.json) and it just contains the data loaded during the build process in pure json. The problematic requests however don't just return the json code, but they wrap it in a <script> tag in some HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <meta charSet="utf-8"/>
    <title>Demo PWA Storefront – Saleor Commerce</title>
    ...
</head>
<body>
<div id="__next"></div>
<script id="__NEXT_DATA__" type="application/json">{
    "props": {
        "pageProps": {
            "data": {
                "shop": {
     ...
    },
    "page": "/",
    "query": {},
    "buildId": "WsXrOHPdIWvUjVMk__MLx",
    "isFallback": false,
    "gsp": true,
    "appGip": true
}</script>
<script nomodule="" src="/_next/static/chunks/polyfills-4d40edbb0712d034407e.js"></script>
<script src="/_next/static/chunks/webpack-89a9448592201df050da.js" async=""></script>
...
<div id="modal-root"></div>
</body>
</html>

Furthermore, the structure of the contained json is different. It does not contain product information about the seaman beer but instead general information about the shop, like all categories, all products, shop description etc.

EDIT:
I just found that the page tree in the build logs that is generated when generating static pages contain all working products but none of the not-working product:

#13 212.6 info  - Generating static pages (5/22)
#13 213.5 info  - Generating static pages (10/22)
#13 214.6 info  - Generating static pages (16/22)
#13 215.9 info  - Generating static pages (22/22)
#13 215.9 info  - Finalizing page optimization...
#13 215.9 
#13 215.9 Page      
...
#13 215.9 ├ ● /product/[slug]                                                12.7 kB        2.62 MB
#13 215.9 ├   └ 32.73eac7.css                                                2.09 kB
#13 215.9 ├   ├ /product/apple-juice
#13 215.9 ├   ├ /product/carrot-juice
#13 215.9 ├   └ /product/nebula-night-sky-paint

EDIT 2:
I furthermore found that this applies only to articles that are not marked as "Show in Product Listings".

Steps to reproduce the problem

Deploy the latest 3.0 Version of the backend and the storefront via docker (build with github actions, deploy to sloppy.io), load demo data, click through some products.
The Dockerfile is almost identical to the original one, except that nginx is configured to listen on port 8080 which is then mapped to port 80 in the hosting setup, and the nginx server_name has been adjusted.

What I expected to happen

I want to see the product detail page.

System information
Browser and OS should not matter here, as in a local setup everything works fine.
The production-like test setup runs on sloppy.io (docker hosting).