Summary

The build fails on Netlify

See log

9:27:52 AM: Now using node v16.14.1 (npm v8.5.0)
9:27:52 AM: Started restoring cached build plugins
9:27:52 AM: Finished restoring cached build plugins
9:27:52 AM: Attempting ruby version 2.7.2, read from environment
9:27:53 AM: Using ruby version 2.7.2
9:27:53 AM: Using PHP version 8.0
9:27:53 AM: Started restoring cached node modules
9:27:53 AM: Finished restoring cached node modules
9:27:54 AM: Installing NPM modules using NPM version 8.5.0
9:27:56 AM: npm ERR! code ERESOLVE
9:27:56 AM: npm ERR! ERESOLVE unable to resolve dependency tree
9:27:56 AM: npm ERR!
9:27:56 AM: npm ERR! While resolving: [email protected]
9:27:56 AM: Creating deploy upload records
9:27:56 AM: npm ERR! Found: [email protected]
9:27:56 AM: npm ERR! node_modules/graphql
9:27:56 AM: npm ERR!   graphql@"16.3.0" from the root project
9:27:56 AM: npm ERR!   peer graphql@"^14.0.0 || ^15.0.0 || ^16.0.0" from @apollo/[email protected]
9:27:56 AM: npm ERR!   node_modules/@apollo/client
9:27:56 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
9:27:56 AM: npm ERR!     @apollo/client@"3.5.9" from the root project
9:27:56 AM: npm ERR!     peer @apollo/client@"^3.3.19" from @saleor/[email protected]
9:27:56 AM: npm ERR!     node_modules/@saleor/sdk
9:27:56 AM: npm ERR!       @saleor/sdk@"^0.4.3" from the root project
9:27:56 AM: npm ERR!   1 more (subscriptions-transport-ws)
9:27:56 AM: npm ERR!
9:27:56 AM: npm ERR! Could not resolve dependency:
9:27:56 AM: npm ERR! peer graphql@"^15.5.0" from @saleor/[email protected]
9:27:56 AM: npm ERR! node_modules/@saleor/sdk
9:27:56 AM: npm ERR!   @saleor/sdk@"^0.4.3" from the root project
9:27:56 AM: npm ERR!
9:27:56 AM: npm ERR! Fix the upstream dependency conflict, or retry
9:27:56 AM: npm ERR! this command with --force, or --legacy-peer-deps
9:27:56 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
9:27:56 AM: npm ERR!
9:27:56 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
9:27:56 AM: npm ERR! A complete log of this run can be found in:
9:27:56 AM: npm ERR!     /opt/buildhome/.npm/_logs/2022-03-16T09_27_54_794Z-debug-0.log
9:27:56 AM: Error during NPM install
9:27:56 AM: Build was terminated: Build script returned non-zero exit code: 1
9:27:56 AM: Failing build: Failed to build site
9:27:57 AM: Finished processing build request in 11.0110501s

Steps to reproduce

Deploy the repository to Netlify

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

When entering checkout from the react-storefront as a logged in user. The logged in user is required to sign in again.

There is no feedback for an unsuccessful login attempt.

Summary

On checkout page the stripe form not displayed

Steps to reproduce

1. configue stripe on dashboard ( public key and secret key)
2. active stripe pluging for the default-channel
3. go to storefront check the stripe radio button
4. nothing dispalyed

A link to a reproduction repository

No response

What OS are you using?

Linux

Your next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});

const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);
const allowedImageDomains = process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS
? process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS.split(",")
: [];
const imageConversionFormats = process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS
? process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS.split(",")
: [];

module.exports = withBundleAnalyzer({
reactStrictMode: true,
swcMinify: true,
images: {
domains: [apiURL.hostname, ...allowedImageDomains],
formats: imageConversionFormats,
},
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "x-content-type-options",
value: "nosniff",
},
{ key: "x-xss-protection", value: "1" },
{ key: "x-frame-options", value: "DENY" },
{
key: "strict-transport-security",
value: "max-age=31536000; includeSubDomains",
},
],
},
];
},
experimental: {
reactRoot: true,
},
});

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

The project should provide a reference Dockerfile that generates an image based on a web server (e.g. Nginx) that contains the exported static files built for this react-storefront project. I mean something similar to the Dockerfile of the now deprecated saleor-storefront project.

Given that it does not exist, I tried myself to create one, but the pnpm run export command failed with an error saying something like this:

Error: i18n support is not compatible with next export.
See here for more info on deploying: https://nextjs.org/docs/deployment

Also, I may have found this other error:

Error: i18n support is not compatible with next export.
See here for more info on deploying: https://nextjs.org/docs/deployment

As a temporary workaround to get a working Docker image for this react-storefront project, I'm using this Dockerfile:

FROM docker.io/node:16
WORKDIR /app
RUN npm install -g pnpm
COPY . .
RUN pnpm i

ARG NEXT_PUBLIC_API_URI
ARG NEXT_PUBLIC_DEFAULT_CHANNEL
ARG NEXT_PUBLIC_VERCEL_URL

ENV NEXT_PUBLIC_API_URI ${NEXT_PUBLIC_API_URI:-http://mysaleorapi.example.com/graphql/}
ENV NEXT_PUBLIC_DEFAULT_CHANNEL ${NEXT_PUBLIC_DEFAULT_CHANNEL:-default-channel}
ENV NEXT_PUBLIC_VERCEL_URL ${NEXT_PUBLIC_VERCEL_URL:-http://react-storefront.example.com}

# export failed with this:
# Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment
# RUN pnpm run export

# This is to prevent this error:
#   http://mynewreactstorefront.example.com/_next/image?url=http%3A%2F%2Fmysaleorapi.example.com%2Fmedia%2Fproducts%2Fsaleordemoproduct_cl_boot07_1.png&w=828&q=75
#   400 Bad Request
#   data:text/plain,"url" parameter is not allowed
# which seems to come from this Next.js source file:
#  https://github.com/vercel/next.js/blob/canary/packages/next/server/image-optimizer.ts
#if (!domains.includes(hrefParsed.hostname)) {
#  res.statusCode = 400
#  res.end('"url" parameter is not allowed')
#  return { finished: true }
#}
RUN sed -i 's/"img.youtube.com"/"img.youtube.com", "mysaleorapi.example.com"/g' next.config.js

# Then as an alternative to the failed "pnpm run export" attempt, we will directly
# run the Node application in production mode, exposing its default port 3000.
# see https://nextjs.org/docs/api-reference/cli#production
# see https://github.com/saleor/react-storefront/issues/84#issuecomment-966874104
expose 3000
RUN pnpm run build
CMD pnpm run start
EOF

But it has these diadvantages:

• It's more suitable for a development environment (e.g a Dockerfile.dev file).
• I assume the generated image requires more system resources to run.
• I assume the generated image will not be as efficient as another one based on Nginx to serve static files.

Steps to reproduce

Try to generate a Docker image based on a Dockerfile that uses two images, the first one as the builder to export the built files and the second one derived from nginx:stable, for example like this scheleton file:

FROM docker.io/node:16 as builder
...
RUN pnpm run export
...
FROM nginx:stable
...
COPY --from=builder /app/dist/ /app/

A link to a reproduction repository

No response

What OS are you using?

Linux

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

Last week this worked, this week it errors. It's same error below on any "saleor" command.

% saleor storefront create     
file:///usr/local/lib/node_modules/saleor/build/cli/storefront/create.js:1
import { download, extract } from "gitly";
         ^^^^^^^^
SyntaxError: Named export 'download' not found. The requested module 'gitly' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'gitly';
const { download, extract } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async loadESM (node:internal/process/esm_loader:88:5)
    at async handleMainPromise (node:internal/modules/run_main:61:12)

This is the saleor CLi install output:

npm i -g saleor@latest
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

changed 1485 packages, and audited 1486 packages in 1m

94 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Steps to reproduce

Follow the Setup guide on this repo:
npm i -g saleor@latest
saleor storefront create

A link to a reproduction repository

No response

What OS are you using?

Mac OS

Your next.config.js file

NA - doesn't get this far

Builds logs (or link to your logs)

NA - doesn't get this far

Function logs

NA - doesn't get this far

Summary

[sitemap] intex.tsx has hard wired page paths for https://localhost:3001/

Steps to reproduce

N/A

A link to a reproduction repository

N/A

What OS are you using?

No response

Your next.config.js file

N/A

Builds logs (or link to your logs)

N/A

Function logs

N/A

Summary

It looks like Google's Lighthouse tool does not think the site is fast (at all).
I think it would be worthwhile to go through the findings and identify the problems or potential false flags. As of now, I would fear that as a user of the site (just by using the demo) my website would get slaughtered by Google for poor performance.

The link to the report can be found here

Steps to reproduce

Open Demo site
Run Lighhouse Report tool
See result

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

`import { Transition } from '@headlessui/react'
import { useState } from 'react'

function MyComponent() {
const [isShowing, setIsShowing] = useState(false)

return (
<>
<button onClick={() => setIsShowing((isShowing) => !isShowing)}>
Toggle


I will fade in and out

</>
)
`}``

Steps to reproduce

If you insert transition code anywhere, it will not be displayed

A link to a reproduction repository

No response

What OS are you using?

Mac OS

Your next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});

const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);
const allowedImageDomains = process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS
? process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS.split(",")
: [];
const imageConversionFormats = process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS
? process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS.split(",")
: [];

module.exports = withBundleAnalyzer({
reactStrictMode: true,
swcMinify: true,
images: {
domains: [apiURL.hostname, ...allowedImageDomains],
formats: imageConversionFormats,
},
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "x-content-type-options",
value: "nosniff",
},
{ key: "x-xss-protection", value: "1" },
{ key: "x-frame-options", value: "DENY" },
{
key: "strict-transport-security",
value: "max-age=31536000; includeSubDomains",
},
],
},
];
},
experimental: {
reactRoot: true,
},
});

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

When I pull down this project from github, I was following the instructions in README.md to setup this project.
*

pnpm i

• Did exactly NOTHING after dependencies installed successfully

npm run generate

I got saleor/api.tsx with some changed and this's not what I expected (nothing should be changed in git repository)

Coule you please tell me what have I done wrong, thx in advance?

And belows are some information about my environment

# git commit that I pulled down
$ git log -1
commit 673f447cd1af414f1c76da55dbdd243a2e9809df (HEAD -> main, origin/main, origin/HEAD)
Author: Irgen Kini <[email protected]>
Date:   Wed Oct 20 10:53:48 2021 +0200

    Orderlist and details views - responsible

$ git status

Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   saleor/api.tsx

no changes added to commit (use "git add" and/or "git commit -a")
$

$ git diff saleor/api.tsx

diff --git a/saleor/api.tsx b/saleor/api.tsx
index e1c0c8d..fcc5b99 100644
--- a/saleor/api.tsx
+++ b/saleor/api.tsx
@@ -12653,17 +12653,17 @@ export type _Service = {
 
 export type PriceFragment = { __typename?: 'Money', currency: string, amount: number, localizedAmount: string };
 
-export type ImageFragment = { __typename?: 'Image', url: string, alt?: Maybe<string> };
+export type ImageFragment = { __typename?: 'Image', url: string, alt?: string | null | undefined };
 
 export type ProductMediaFragment = { __typename?: 'ProductMedia', url: string, alt: string, type: ProductMediaType };
# ... many line are changed

The most obvious diff parts in common as below, just like ImageFragment.alt
someField?: Maybe<T>
vs
someField?: T | null | undefined

and here is what looks like in my GUI SourceTree

Summary

Shipping methods are unavailable.

Steps to reproduce

1. Add items to the cart.
2. Go to checkout.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

there is a UI related issue in the Saleor front-end it's not looking good in mobile devices ( check the sort by option)[](url

)

Summary

Related products are not displayed as a link in storefront. It's displayed as a simple text, which is not handy.

Steps to reproduce

1. Go to Dashboard
2. assign related products to a product
3. Check how related products look like on a storefront

A link to a reproduction repository

No response

What OS are you using?

macOS

Does react-storefront support rtl for right-to-left cultures?(arabic,hebr,persian..)

Summary

Just got: ERR_PACKAGE_PATH_NOT_EXPORTED

ready - started server on 0.0.0.0:3001, url: http://localhost:3001
info  - Loaded env from /home/react-storefront/.env
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /home/react-storefront/node_modules/react/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:705:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/home/react-storefront/node_modules/.pnpm/[email protected]_757a802188413a36d4f24237d13b8e90/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at getPackagePath (/home/react-storefront/node_modules/.pnpm/[email protected]_757a802188413a36d4f24237d13b8e90/node_modules/next/dist/build/webpack-config.js:548:41)
    at Object.getBaseWebpackConfig [as default] (/home/react-storefront/node_modules/.pnpm/[email protected]_757a802188413a36d4f24237d13b8e90/node_modules/next/dist/build/webpack-config.js:564:9) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
 ELIFECYCLE  Command failed with exit code 1.

Steps to reproduce

git clone [email protected]:saleor/react-storefront.git
pnpm i
npm run dev

node -v --> v17.5.0

A link to a reproduction repository

No response

What OS are you using?

Linux

Your next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  // swcMinify: true,
  swcMinify: false,
  images: {
    domains: ["vercel.saleor.cloud", "img.youtube.com"],
    formats: ["image/avif", "image/webp"],
  },
  async redirects() {
    return [
      {
        source: "/",
        // TODO: Investigate why constants from project cannot be imported
        // User should be redirected to the defaults defined in @lib/regions
        destination: "/default-channel/en-US",
        permanent: false,
      },
    ];
  },
});

Builds logs (or link to your logs)

# Paste logs here

Function logs

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /home/react-storefront/node_modules/react/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:705:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/home/react-storefront/node_modules/.pnpm/[email protected]_757a802188413a36d4f24237d13b8e90/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at getPackagePath (/home/react-storefront/node_modules/.pnpm/[email protected]_757a802188413a36d4f24237d13b8e90/node_modules/next/dist/build/webpack-config.js:548:41)
    at Object.getBaseWebpackConfig [as default] (/home/react-storefront/node_modules/.pnpm/[email protected]_757a802188413a36d4f24237d13b8e90/node_modules/next/dist/build/webpack-config.js:564:9) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
 ELIFECYCLE  Command failed with exit code 1.

Summary

When checking out as a guest it should be required to enter a new valid email address. The email should be checked against the database for existing users and given a prompt to continue checkout or login.

Steps to reproduce

1. Add items to the cart.
2. Checkout as a guest.
3. Email is already entered as [email protected]

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Hello, I'm new with Next.js and React and I've been meaning to try Saleor out for a while now but I would like to have a storefront with good foundations to have something to work on rather than making it entirely from scratch. How may host the storefront?

Summary

Apologies if this falls more into feature request territory... but I don't want locale/channel in the URLs.

I've removed the folders and remove them from lib/$path.ts but this is causing issues.

What is the correct approach here?

Steps to reproduce

1. Remove locale/channel folder
2. Amend paths in lib/$path.ts
3. Many links still include locale/channel

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

Create a menu nav item to a Product Collection (not Category) and the home page will show all products because the graph QL was missing the part of the query for collections. I've fixed it in my branch but cannot open a PR for you because too many divergent styling changes in my fork that you would not want. Feel free to attribute the change back to me somehow. -- In general I would like to contribute back to this repo but github's only 1 fork limitation is going to make that near impossible.

Steps to reproduce

Here is the fix: matteius@f62a617

A link to a reproduction repository

matteius@f62a617

What OS are you using?

No response

Your next.config.js file

n/a

Builds logs (or link to your logs)

n/a

Function logs

n/a

Summary

After installing the Docker version and running the React Storefront. It displays these errors.

Steps to reproduce

1. Follow the instructions here to install Saleor.
2. Run the services using docker-compose up
3. Open http://localhost:3001

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: [apiURL.hostname, "img.youtube.com"],
    formats: ["image/avif", "image/webp"],
  },
  async redirects() {
    return [
      {
        source: "/",
        // TODO: Investigate why constants from project cannot be imported
        // User should be redirected to the defaults defined in @lib/regions
        destination: "/default-channel/en-US",
        permanent: false,
      },
    ];
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "x-content-type-options",
            value: "nosniff",
          },
          { key: "x-xss-protection", value: "1" },
          { key: "x-frame-options", value: "DENY" },
          {
            key: "strict-transport-security",
            value: "max-age=31536000; includeSubDomains",
          },
        ],
      },
    ];
  },
  experimental: {
    reactRoot: true,
  },
});

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

Header menu items with long title are badly displayed

Here is how it looks in Dashboard :

Steps to reproduce

1. Go to dashboard
2. go to Menu settings, navbar
3. Create menu items with long names
4. Check how it looks on a storefront

A link to a reproduction repository

No response

What OS are you using?

Mac OS

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

Deployed a new saleor, dashboard and react-storefront container to my new site and spent some days configuring and understanding whats going on. Finally got past some build and configuration issues and now I can add items to the cart and its the checkout checkout process address validation that is broken. Here are my notes:

1. Saving a Billing Address: Silently fails and clears out the form data
2. The phone number has to have a + prefix in front of it, so for example +1206555555 and not 1206555555, or 206555555 or any other attempt at formatting that with out the +1 country code. No validation errors on screen, address clears,
3. The form data in the network tab defaults the country to PL so I edited it in my fork to default to US.
4. Despite changing the country code the backend continues to fail to validate the zip code -- it seems the form needs to collect the country_area field on the form which is the users state. I haven't tried adding this to see what the next issue might be, yet.

As such I cannot get past adding the Billing address to the cart and the end user has no idea about why the address is clearing after each attempt, without debugging the application.

Steps to reproduce

Here is a demo, visit: https://mattscoinage.com/default-channel/en-US/products/test-stripe
add the product to cart and attempt to start checkout.

A link to a reproduction repository

https://github.com/matteius/react-storefront

What OS are you using?

Linux

Your next.config.js file

This is the default next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);
const allowedImageDomains = process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS
  ? process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS.split(",")
  : [];
const imageConversionFormats = process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS
  ? process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS.split(",")
  : [];

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: [apiURL.hostname, ...allowedImageDomains],
    formats: imageConversionFormats,
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "x-content-type-options",
            value: "nosniff",
          },
          { key: "x-xss-protection", value: "1" },
          { key: "x-frame-options", value: "DENY" },
          {
            key: "strict-transport-security",
            value: "max-age=31536000; includeSubDomains",
          },
        ],
      },
    ];
  },
  experimental: {
    reactRoot: true,
  },
});

Builds logs (or link to your logs)

FROM docker.io/node:16
WORKDIR /app
RUN npm install -g [email protected]
COPY . .
RUN pnpm i

ARG NEXT_PUBLIC_API_URI
ARG NEXT_PUBLIC_DEFAULT_CHANNEL
ARG NEXT_PUBLIC_VERCEL_URL

ENV NEXT_PUBLIC_API_URI ${NEXT_PUBLIC_API_URI:-https://api.mattscoinage.com/graphql/}
ENV NEXT_PUBLIC_DEFAULT_CHANNEL ${NEXT_PUBLIC_DEFAULT_CHANNEL:-default-channel}

# export failed with this:
# Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment
# RUN pnpm run export

# This is to prevent this error:
#   http://mynewreactstorefront.example.com/_next/image?url=http%3A%2F%2Fmysaleorapi.example.com%2Fmedia%2Fproducts%2Fsaleordemoproduct_cl_boot07_1.png&w=828&q=75
#   400 Bad Request
#   data:text/plain,"url" parameter is not allowed
# which seems to come from this Next.js source file:
#  https://github.com/vercel/next.js/blob/canary/packages/next/server/image-optimizer.ts
#if (!domains.includes(hrefParsed.hostname)) {
#  res.statusCode = 400
#  res.end('"url" parameter is not allowed')
#  return { finished: true }
#}
# RUN sed -i 's/"img.youtube.com"/"img.youtube.com", "mysaleorapi.example.com"/g' next.config.js

# Then as an alternative to the failed "pnpm run export" attempt, we will directly
# run the Node application in production mode, exposing its default port 3000.
# see https://nextjs.org/docs/api-reference/cli#production
# see https://github.com/saleor/react-storefront/issues/84#issuecomment-966874104
expose 3010
RUN pnpm run build
CMD PORT=3010 pnpm run start

Function logs

No response

Summary

CSS formatting on cart page is broken.

Steps to reproduce

1. Go to cart on mobile device.

A link to a reproduction repository

N/A

What OS are you using?

No response

Your next.config.js file

N/A

Builds logs (or link to your logs)

N/A

Function logs

N/A

Summary

Below is an image with the background colored in black of what happens when you have a cart on mobile (It does it on actual phone as well) I have been messing with things to fix this, but could not figure it out.

Steps to reproduce

Go to https://reactstorefront.vercel.app/default-channel/en-US and add items to cart
Put the site in mobile on developer tools

If the image is not clear what is happening, the body and navbar are shrinking and the text and quantity editor as well as the text in the product and product sku will go outside of the body.

Summary

Payment methods unavailable.

Steps to reproduce

1. Add items to the cart.
2. Go to checkout.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

I created a footer menu in dashboard, but it's not displayed in a storefront

Steps to reproduce

1. Go to Dashboard
2. Create menu with 'footer' slug

3. Go to storefront and check footer

I've follow the instruction on how to deploy storefront and admin. The admin is successfully deployed on heroku. But the storefront get error.

First build error I get show log like this

-----> Installing binaries
       engines.node (package.json):  >=14.0.0
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version >=14.0.0...
       Downloading and installing node 17.1.0...
       Using default npm version: 8.1.2
       
-----> Restoring cache
       Caching has been disabled because NODE_MODULES_CACHE=false
       
-----> Installing dependencies
       Installing node modules (package.json)
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE unable to resolve dependency tree
       npm ERR! 
       npm ERR! While resolving: [email protected]
       npm ERR! Found: [email protected]
       npm ERR! node_modules/graphql
       npm ERR!   graphql@"16.0.1" from the root project
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peer graphql@"^14.0.0 || ^15.0.0" from @apollo/[email protected]
       npm ERR! node_modules/@apollo/client
       npm ERR!   @apollo/client@"3.4.17" from the root project
       npm ERR! 
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force, or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
       npm ERR! 
       npm ERR! See /tmp/npmcache.j6WPn/eresolve-report.txt for a full report.
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.j6WPn/_logs/2021-11-12T05_58_02_132Z-debug.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       Some possible problems:
       
       - Dangerous semver range (>) in engines.node
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

https://github.com/saleor/react-storefront/blob/2f3de82301435e5fe7698063e8cd9a9ec1075278/package.json#L6

So I change to follow saleor-dashboard configuration

    "node": ">=14 <15",
    "npm": ">=6.11.0 <7"

And the build succeed.

-----> Installing binaries
       engines.node (package.json):  >=14 <15
       engines.npm (package.json):   >=6.11.0 <7
       
       Resolving node version >=14 <15...
       Downloading and installing node 14.18.1...
       Bootstrapping npm >=6.11.0 <7 (replacing 6.14.15)...
       npm >=6.11.0 <7 installed
       
-----> Restoring cache
       Caching has been disabled because NODE_MODULES_CACHE=false
       
-----> Installing dependencies
       Installing node modules (package.json)
       
       > [email protected] install /tmp/build_758d4938/node_modules/sharp
       > (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
       
       sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.11.3/libvips-8.11.3-linux-x64.tar.br
       
       > [email protected] postinstall /tmp/build_758d4938/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"
       
       added 1108 packages from 853 contributors and audited 1118 packages in 31.74s
       
       122 packages are looking for funding
         run `npm fund` for details
       
       found 3 moderate severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details
       
-----> Build
       Detected both "build" and "heroku-postbuild" scripts
       Running heroku-postbuild
       
       > [email protected] heroku-postbuild /tmp/build_758d4938
       > npm run build
       
       
       > [email protected] build /tmp/build_758d4938
       > next build
       
       info  - Loaded env from /tmp/build_758d4938/.env
warn  - SWC minify beta enabled. https://nextjs.org/docs/messages/swc-minify-enabled
       warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
       Attention: Next.js now collects completely anonymous telemetry regarding usage.
       This information is used to shape Next.js' roadmap and prioritize features.
       You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
       https://nextjs.org/telemetry
       
       info  - Checking validity of types...
       info  - Creating an optimized production build...
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
       info  - Compiled successfully
       info  - Collecting page data...
       info  - Generating static pages (0/57)
       info  - Generating static pages (14/57)
       info  - Generating static pages (28/57)
Rich text data not in the EditorJS format.
       info  - Generating static pages (42/57)
       info  - Generating static pages (57/57)
       info  - Finalizing page optimization...
       
       Page                                              Size     First Load JS
       ┌ ● /                                             848 B           200 kB
       ├   /_app                                         0 B             133 kB
       ├ λ /[sitemap]                                    244 B           133 kB
       ├ ○ /404                                          2.3 kB          163 kB
       ├ ○ /account/addressBook                          589 B           197 kB
       ├ ○ /account/login                                1.55 kB         143 kB
       ├ ○ /account/orders                               646 B           197 kB
       ├ ● /account/orders/[token]                       1.37 kB         198 kB
       ├ ○ /account/preferences                          2.13 kB         199 kB
       ├ ○ /account/register                             1.54 kB         143 kB
       ├ ○ /cart                                         1.51 kB         201 kB
       ├ ● /category/[slug]                              1.32 kB         201 kB
       ├   ├ /en-US/category/accessories
       ├   ├ /en-US/category/groceries
       ├   ├ /en-US/category/apparel
       ├   └ [+9 more paths]
       ├ ○ /checkout                                     1.21 kB         200 kB
       ├ ● /collection/[slug]                            1.33 kB         201 kB
       ├   ├ /en-US/collection/featured
       ├   ├ /en-US/collection/featured-products
       ├   ├ /en-US/collection/special-products
       ├   └ [+2 more paths]
       ├ ○ /order                                        472 B           197 kB
       ├ ● /page/[slug]                                  512 B           197 kB
       ├ ● /products/[slug] (ISR: 60 Seconds) (3216 ms)  3.7 kB          203 kB
       ├   ├ /en-US/products/saleor-beanie (840 ms)
       ├   ├ /en-US/products/less-is-mo
       ├   ├ /en-US/products/polo-shirt
       ├   ├ /en-US/products/polo-shirt-2
       ├   ├ /en-US/products/saleor-cup
       ├   ├ /en-US/products/saleor-digital-pack
       ├   ├ /en-US/products/saleor-hoodie
       ├   └ [+6 more paths]
       └ ○ /search                                       1.36 kB         198 kB
       + First Load JS shared by all                     133 kB
         ├ chunks/framework-beb51d85c0b60541.js          42.1 kB
         ├ chunks/main-9f9209d678e95caa.js               28.7 kB
         ├ chunks/pages/_app-b1e6a06895e54cab.js         61.3 kB
         ├ chunks/webpack-29f4e7141b68b4d4.js            831 B
         └ css/4221126af8035ac7.css                      7.08 kB
       
       λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
       ○  (Static)  automatically rendered as static HTML (uses no initial props)
       ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
          (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
       
       
       > [email protected] postbuild /tmp/build_758d4938
       > next-sitemap
       
       Loaded env from /tmp/build_758d4938/.env
       
-----> Pruning devDependencies
       Skipping because NPM_CONFIG_PRODUCTION is 'false'
       
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
-----> Installed nginx 1.19.0 to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 134.2M
-----> Launching...

But when I open the application, it shows nginx 404 not found. And when I check the log, it shows

2021-11-12T06:18:51.491389+00:00 app[web.1]: ls: cannot access '/app/build/static/js/*.js': No such file or directory
2021-11-12T06:18:51.491653+00:00 app[web.1]: Error injecting runtime env: bundle not found '/app/build/static/js/*.js'. See: https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-custom-bundle-location
2021-11-12T06:18:51.750685+00:00 app[web.1]: Starting log redirection...
2021-11-12T06:18:51.750932+00:00 app[web.1]: Starting nginx...

I try to connect to heroku console and I don't found /app/

Is there something wrong with the configuration?

Summary

On entering the page the billing and shipping sections show the shipping and billing address list as well as the form to change the address. The page should show the default billing and shipping addresses (if different) or the default billing and message indicating to use the same billing and shipping in the shipping section. There should also be the button the change.

If there is no default billing or shipping the form should be shown requiring the address to be entered.

Selecting the Shipping or Billing address (If there is one in the database) collapses the menu and does not display the address in the Shipping or Billing sections.

If you are a logged in user.

ShippingAddressSection.tsx line 83:
active && editing

active is never true when coming to the page and cannot be triggered to change/add the shipping address. Shipping can never be entered.

Both could probably use the same component.

Steps to reproduce

1. Add items to the cart.
2. Go to checkout page.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

I've added products to categories and the categories show up in the nav menu but no clickable links.
I've created a subcategory and added the product there but still no clickable links.
How then is it to make use of the nav bar

Steps to reproduce

Go to https://mattscoinage.com/default-channel/en-US
Check out the nav bar, it has the top level categories in plaintext and nothing else.

A link to a reproduction repository

https://github.com/matteius/react-storefront

What OS are you using?

No response

Your next.config.js file

n/a

Builds logs (or link to your logs)

n/a

Function logs

n/a

Summary

Changing the .env value for NEXT_PUBLIC_DEFAULT_CHANNEL does not do anything. A quick search shows that value is never read.

Steps to reproduce

1. Change the .env NEXT_PUBLIC_DEFAULT_CHANNEL to anything.
2. Start the server.

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

Logged in users email should display the email of the user who is logged in. Currently displays [email protected].

Steps to reproduce

1. Log into any registered account.
2. Add items to the shopping cart.
3. Go to checkout page.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

Saving information from the forms should request a new checkout object.

It doesn't seem like the use same shipping as billing button is working due to the data being unavailable. The checkout object after saving the billing address is still null.

Steps to reproduce

1. Fill out the checkout billing address form and save.
2. Select the use same address as the billing button.
3. Console.logging the checkout object and the billingAddress show the address as null and returns nothing.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

AddressBook.tsx line 32 addresses.map has no key prop.

Also, there is no way to edit or add new addresses.

Steps to reproduce

1. Login to an active account
2. Go to account preferences / address book
3. View address list (if there are addresses to list)
4. Check console.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

n/a

Builds logs (or link to your logs)

n/a

Function logs

n/a

remote: remote: -----> Installing binaries remote: engines.node (package.json): >=14.0.0 remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version >=14.0.0... remote: Downloading and installing node 17.3.0... remote: Using default npm version: 8.3.0 remote: remote: -----> Restoring cache remote: Caching has been disabled because NODE_MODULES_CACHE=false remote: remote: -----> Installing dependencies remote: Installing node modules (package.json) remote: npm ERR! code ERESOLVE remote: npm ERR! ERESOLVE unable to resolve dependency tree remote: npm ERR! remote: npm ERR! While resolving: [email protected] remote: npm ERR! Found: [email protected] remote: npm ERR! node_modules/graphql remote: npm ERR! graphql@"16.1.0" from the root project remote: npm ERR! peer graphql@"^14.0.0 || ^15.0.0 || ^16.0.0" from @apollo/[email protected] remote: npm ERR! node_modules/@apollo/client remote: npm ERR! @apollo/client@"3.5.6" from the root project remote: npm ERR! peer @apollo/client@"^3.3.19" from @saleor/[email protected]. remote: npm ERR! node_modules/@saleor/sdk remote: npm ERR! @saleor/sdk@"^0.4.0" from the root project remote: npm ERR! 1 more (subscriptions-transport-ws) remote: npm ERR! remote: npm ERR! Could not resolve dependency: remote: npm ERR! peer graphql@"^15.5.0" from @saleor/[email protected] remote: npm ERR! node_modules/@saleor/sdk remote: npm ERR! @saleor/sdk@"^0.4.0" from the root project remote: npm ERR! remote: npm ERR! Fix the upstream dependency conflict, or retry remote: npm ERR! this command with --force, or --legacy-peer-deps remote: npm ERR! to accept an incorrect (and potentially broken) dependency resolution. remote: npm ERR! remote: npm ERR! See /tmp/npmcache.VVj01/eresolve-report.txt for a full report. remote: remote: npm ERR! A complete log of this run can be found in: remote: npm ERR! /tmp/npmcache.VVj01/_logs/2021-12-30T22_19_03_315Z-debug-0.log remote: remote: -----> Build failed remote: remote: We're sorry this build is failing! You can troubleshoot common issues here: remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys remote: remote: Some possible problems: remote: remote: - Dangerous semver range (>) in engines.node remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version remote: remote: Love, remote: Heroku remote: remote: ! Push rejected, failed to compile React.js (create-react-app) multi app. remote: remote: ! Push failed

Fix: Add npm version to package.json:
"engines": { "node": ">=14 <15", "npm": ">=6.11.0 <7" },

What about next version 12 support?

When I try to run this locally, Authentication doesn't seem to persist tab refresh.

Here's a screengrab showing the error-

It seems like authentication is not getting saved via the login api.

The alignment of elements between the nav bar, the main component and the right side menu is incorrect as shown in the image below:

i

Summary

If you're working on say the Order component and you make a change, and save, the browser throws hydration errors.
"Text content does not match server-rendered HTML"

If you then reload the page, you are logged out of the customer account area.

The code responsible is in AccountLayout.

  if (!authenticated && process.browser) {
    router.push(paths.account.login.$url({ query: { next: router?.pathname } }));
    return null;
  }

I've also had hydration issues with components using the Spinner component.

Steps to reproduce

1. Run site in dev mode
2. Log in to customer account area
3. Make a change to an account component
4. Observe hydration error in browser
5. Reload page and observe logged out

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

When first entering the search page the page shows error.

If you type quickly in the search input some of the letters can get dropped.

No, search suggestions or wildcard on search input. Searching must be exactly typed.

Steps to reproduce

1. Go to search page and use.

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

N/A

Builds logs (or link to your logs)

N/A

Function logs

N/A

Summary

Loading order or possibly a suspense problem, maybe static or ssr.

checkout.tsx
lines 21 -28

  if (loading) {
    return (
      <>
        <Spinner />
        <BaseSeo title="Checkout" />
      </>
    );
  }

The is causing a hydration error. Removing the spinner makes it go away. There is nothing wrong in the spinner itself in fact adding anything but the BaseSeo will cause the error. Something in the way the page is setup when loading is false is causing the page to hydrate poorly.

Steps to reproduce

(running in dev mode not tested in production)

1. Add items to shopping cart.
2. Go to checkout page.
3. Refresh the page.

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

When you update the quantity field of items listed in the cart the fields become disabled and will not enable until the page is refreshed.

Steps to reproduce

1. Add items to the cart.
2. Update the quantity.

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

It doesn't appear that Stripe is currently a payment provider. I see support for Mollie and Adyen.

Summary

In the checkout page, when filling the billing and shipping addresses, I would expect to enter the details of an address in my country, but that fails.

The HTTP traffic in the web browser inspector shows that a GraphQL request to the operationName CheckoutBillingAddressUpdate that is related with the query mutation CheckoutBillingAddressUpdate is failing, returning an error saying that "This value is not valid for the address".

The cause seems to be that the storefront only allows addresses for Poland.

Steps to reproduce

1. Deploy your own Saleor react-storefront instance, pointing to a working Saleor API instance.
2. From the storefront UI, add some products to the shopping cart.
3. Proceed to checkout.
4. For the billing address, fill an address that is not located in Poland.

A link to a reproduction repository

No response

What OS are you using?

No response

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

I am trying to fix the prior issue I reported and finding that without making any changes I am unable to successfully run pnpm run generate.

Steps to reproduce

Checkout latest react-storefront
Modify Dockerfile to use RUN npm install -g [email protected] since the head of pnpm fails.
Ensure using npm install -g [email protected]
Now run pnpm run generate to try and process the thing, but it fails.

A link to a reproduction repository

https://github.com/matteius/react-storefront

What OS are you using?

Linux

Your next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);
const allowedImageDomains = process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS
  ? process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS.split(",")
  : [];
const imageConversionFormats = process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS
  ? process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS.split(",")
  : [];

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: [apiURL.hostname, ...allowedImageDomains],
    formats: imageConversionFormats,
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "x-content-type-options",
            value: "nosniff",
          },
          { key: "x-xss-protection", value: "1" },
          { key: "x-frame-options", value: "DENY" },
          {
            key: "strict-transport-security",
            value: "max-age=31536000; includeSubDomains",
          },
        ],
      },
    ];
  },
  experimental: {
    reactRoot: true,
  },
});

Builds logs (or link to your logs)

(saleor) matteius@matteius-VirtualBox:~/mattscoinage/react-storefront$ pnpm run generate

> [email protected] generate /home/matteius/mattscoinage/react-storefront
> dotenv -c -- graphql-codegen --config codegen.yml -w

  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate saleor/api.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        →     at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:6:45
    ❯ Generate ./graphql.schema.json
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        →     at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:6:45


 Found 2 errors

  ✖ saleor/api.tsx
    AggregateError: GraphQL Document Validation failed with 1 errors;
      Error 0: GraphQLDocumentError: Variable "$lines" of type "[CheckoutLineInput!]!" used in position expecting type "[CheckoutLineUpdateInput!]!".
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:3:3
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:6:45
        at new exports.AggregateError (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:82:16)
        at Object.checkValidationErrors (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:1253:15)
        at Object.codegen (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-codegen/core/index.js:175:15)
        at async process (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1126:56)
        at async Promise.all (index 0)
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1136:37
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:925:21
    AggregateError: GraphQL Document Validation failed with 1 errors;
      Error 0: GraphQLDocumentError: Variable "$lines" of type "[CheckoutLineInput!]!" used in position expecting type "[CheckoutLineUpdateInput!]!".
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:3:3
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:6:45
        at new exports.AggregateError (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:82:16)
        at Object.checkValidationErrors (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:1253:15)
        at Object.codegen (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-codegen/core/index.js:175:15)
        at async process (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1126:56)
        at async Promise.all (index 0)
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1136:37
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:925:21

  ✖ ./graphql.schema.json
    AggregateError: GraphQL Document Validation failed with 1 errors;
      Error 0: GraphQLDocumentError: Variable "$lines" of type "[CheckoutLineInput!]!" used in position expecting type "[CheckoutLineUpdateInput!]!".
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:3:3
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:6:45
        at new exports.AggregateError (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:82:16)
        at Object.checkValidationErrors (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:1253:15)
        at Object.codegen (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-codegen/core/index.js:175:15)
        at async process (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1126:56)
        at async Promise.all (index 0)
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1136:37
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:925:21
    AggregateError: GraphQL Document Validation failed with 1 errors;
      Error 0: GraphQLDocumentError: Variable "$lines" of type "[CheckoutLineInput!]!" used in position expecting type "[CheckoutLineUpdateInput!]!".
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:3:3
        at /home/matteius/mattscoinage/react-storefront/graphql/mutations/CheckoutLineUpdate.graphql:6:45
        at new exports.AggregateError (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:82:16)
        at Object.checkValidationErrors (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-tools/utils/index.js:1253:15)
        at Object.codegen (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected]/node_modules/@graphql-codegen/core/index.js:175:15)
        at async process (/home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1126:56)
        at async Promise.all (index 0)
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:1136:37
        at async /home/matteius/mattscoinage/react-storefront/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@graphql-codegen/cli/bin.js:925:21


  ℹ Watching for changes...
^C  Shutting down watch...

Function logs

No response

Summary

When browsing the product details for a certain item which has no media images attached to it, and clicking on the "Add to cart" button, I would expect the item to be added to the cart and to be able to see the checkout screen with such item added to the cart.

What actually happens upon clicking such button, is that the site crashes showing the following error:
Unhandled Runtime Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. Received: {}

Steps to reproduce

1. Add a product in the Dashboard without attaching any media images to it.
2. Go to the product details page for such product.
3. Click the "Add to cart" button.
4. The site crashes

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const apiURL = new URL(process.env.NEXT_PUBLIC_API_URI);
const allowedImageDomains = process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS
  ? process.env.NEXT_PUBLIC_ALLOWED_IMAGE_DOMAINS.split(",")
  : [];
const imageConversionFormats = process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS
  ? process.env.NEXT_PUBLIC_IMAGE_CONVERSION_FORMATS.split(",")
  : [];

module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: [apiURL.hostname, ...allowedImageDomains],
    formats: imageConversionFormats,
  },
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "x-content-type-options",
            value: "nosniff",
          },
          { key: "x-xss-protection", value: "1" },
          { key: "x-frame-options", value: "DENY" },
          {
            key: "strict-transport-security",
            value: "max-age=31536000; includeSubDomains",
          },
        ],
      },
    ];
  },
  experimental: {
    reactRoot: true,
  },
});

Builds logs (or link to your logs)

Function logs

[RuntimeError.log](https://github.com/saleor/react-storefront/files/8646837/RuntimeError.log)

Summary

Button type in register.tsx should be submit. Currently set to type button and does not allow users to register an account.

Steps to reproduce

1. Go to register page.
2. Enter user registration information.
3. Try to submit the form.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here

Summary

Logged in users should be able to manage their address book with basic add, remove and update features.

Steps to reproduce

1. Log into any registered users account.
2. Choose the address book option.

A link to a reproduction repository

No response

What OS are you using?

Windows

Your next.config.js file

No response

Builds logs (or link to your logs)

No response

Function logs

No response

Summary

npm i failed to install modules with the following ERROR messages:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=12 <15' },
npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.10.0' }
npm WARN EBADENGINE }
npm WARN deprecated @types/[email protected]: This is a stub types definition. schema-utils provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/[email protected]: This is a stub types definition. react-svg provides its own type definitions, so you don't need this installed.
npm WARN deprecated @types/[email protected]: This is a stub types definition. nuka-carousel provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/[email protected]: This is a stub types definition. graphql provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/[email protected]: This is a stub types definition. dotenv provides its own type definitions, so you do not need this installed.
npm WARN deprecated @types/[email protected]: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: this package has been renamed to babel-plugin-formatjs
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
npm WARN deprecated [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
npm WARN deprecated @formatjs/[email protected]: the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated @sentry/[email protected]: Please migrate to @sentry/tracing; see: https://www.npmjs.com/package/@sentry/apm
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path ....../node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /opt/node-v16.15.0-linux-x64/bin/node ....../node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/opt/node-v16.15.0-linux-x64/bin/node',
npm ERR! gyp verb cli   '....../node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (....../node_modules/node-gyp/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (....../node_modules/node-gyp/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (....../node_modules/node-gyp/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at ....../node_modules/node-gyp/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (....../node_modules/node-gyp/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (....../node_modules/node-gyp/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (....../node_modules/node-gyp/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at ....../node_modules/node-gyp/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at ....../node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python /usr/bin/python
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: /usr/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack 
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:398:12)
npm ERR! gyp

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2022-05-27T08_59_27_883Z-debug-0.log

Steps to reproduce

I actually followed https://github.com/saleor/saleor-storefront/blob/main/README.md

➜  git clone https://github.com/mirumee/saleor-storefront.git
➜  cd saleor-storefront
➜  npm i

3 setups bring the above ERROR messages.

A link to a reproduction repository

https://github.com/saleor/react-storefront

What OS are you using?

Linux

Your next.config.js file

# Paste content of your `next.config.js` file here. Check there is no private info in there.
const withPlugins = require("next-compose-plugins");
const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
const withOptimizedImages = require("next-optimized-images");
const withTM = require("next-transpile-modules")(["register-service-worker"]);

const withServiceWorkerConfig = require("./config/next/config.serviceWorker");
const withBaseConfig = require("./config/next/config.base");
const withDevConfig = require("./config/next/config.dev");
const withProdConfig = require("./config/next/config.prod");

module.exports = withPlugins(
  [
    [withOptimizedImages, { handleImages: ["jpeg", "png", "webp", "gif"] }],
    withTM,
    withBaseConfig,
    withServiceWorkerConfig,
    [withDevConfig, {}, [PHASE_DEVELOPMENT_SERVER]],
    [withProdConfig, {}, ["!" + PHASE_DEVELOPMENT_SERVER]],
  ],
  {
    async headers() {
      return [
        {
          source: "/(.*)",
          headers: [
            {
              key: "x-content-type-options",
              value: "nosniff",
            },
            { key: "x-xss-protection", value: "1" },
            { key: "x-frame-options", value: "DENY" },
            {
              key: "strict-transport-security",
              value: "max-age=31536000; includeSubDomains",
            },
          ],
        },
      ];
    },
  }
);

Builds logs (or link to your logs)

# Paste logs here

Function logs

# Paste logs here
N/A

Summary

If product variants have long title, it does not look good

Steps to reproduce

1. Go to dashboard
2. Create a Product
3. Create product variants with long title
4. Assign product variants to the product
5. Go to storefront, product details and check how variants are displayed

A link to a reproduction repository

No response

What OS are you using?

Mac OS

Hi, I would like to be able to use this but I can't seem to find a License file or an entry in the package.json for the license.

Could that be added?