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

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

hello sir, I host and pass nginx proxy react-storefront:3000 and saleor-app-checkout:3001 on two different subdomain respectively. Both are working but in a saleor-dashboard i am unable to configure payment gateway. Getting an error dashboard.5d80776fede891bce276.js?be297ff5ee0ee0bed80e:7728 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://saleor-app-checkout.lan') does not match the recipient window's origin ('https://saleor-dashboard.lan').

Versions: dashboard v3.7.9 core v3.7.22

Steps to reproduce

1. Go to "dashboard v3.7.9"
2. Click On "Apps"
3. Click On "Third Party Apps"
4. Check On Installed payment "Checkout" app
5. Check the errors in a browser console as shown in figure above

A link to a reproduction repository

https://github.com/saleor/saleor-dashboard

Output from envinfo

System:

• OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
• CPU: (4) arm64 Neoverse-N1
• Memory: 21.39 GB / 23.43 GB
• Container: Yes
• Shell: 5.0.17 - /bin/bash

Binaries:

• Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
• npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
• pnpm 7.13.4

Summary

When running the command pnpm build I'm receiving a failure that shows this output at the end:

storefront:build: 
storefront:build: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
storefront:build: ○  (Static)  automatically rendered as static HTML (uses no initial props)
storefront:build: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
storefront:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: ./pages/_document.tsx
saleor-app-checkout:build: 15:11  Warning: `styled-jsx` should not be used in `pages/_document.js`. See: https://nextjs.org/docs/messages/no-styled-jsx-in-document  @next/next/no-styled-jsx-in-document
saleor-app-checkout:build: 
saleor-app-checkout:build: ./frontend/components/elements/AppProvider/AppProvider.tsx
saleor-app-checkout:build: 46:6  Warning: React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
saleor-app-checkout:build: 
saleor-app-checkout:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
saleor-app-checkout:build: info  - Creating an optimized production build...
saleor-app-checkout:build: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
saleor-app-checkout:build: info  - Using external babel configuration from /root/react-storefront/apps/saleor-app-checkout/.babelrc
saleor-app-checkout:build: [BABEL] Note: The code generator has deoptimised the styling of /root/react-storefront/apps/saleor-app-checkout/graphql/index.ts as it exceeds the max of 500KB.
saleor-app-checkout:build: [BABEL] Note: The code generator has deoptimised the styling of /root/react-storefront/apps/saleor-app-checkout/graphql/index.ts as it exceeds the max of 500KB.
saleor-app-checkout:build: Failed to compile.
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/visitor.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/kinds.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/printer.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/error/GraphQLError.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: ../../packages/checkout-storefront/dist/cjs/index.js
saleor-app-checkout:build: Module not found: ESM packages (graphql/language/parser.mjs) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals
saleor-app-checkout:build: 
saleor-app-checkout:build: Import trace for requested module:
saleor-app-checkout:build: ./pages/checkout-spa.tsx
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: > Build failed because of webpack errors
saleor-app-checkout:build:  ELIFECYCLE  Command failed with exit code 1.
saleor-app-checkout:build: ERROR: command finished with error: command (apps/saleor-app-checkout) pnpm run build exited (1)
command (apps/saleor-app-checkout) pnpm run build exited (1)

My system runs with these elements:

• Debian 11
• node v18.7.0
• pnpm 7.9.3
• As said before, the react-storefront commit ID is ca66031ba017d1839f4653deef00830052d01f8e

Steps to reproduce

1. Checkout the react-storefront repository.
2. Edit its .env file as needed.
3. Install the dependencies with the pnpm i command.
4. Run the pnpm build command inside the react-storefront directory.

A link to a reproduction repository

No response

Output from envinfo

No response

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.

Currently we're using material-ui packages in packages/checkout-storefront. There are a few concerns:

• We're on version 4 which is not longer developed
• material-ui 4 forces us to use getInitialProps in Next.js which results in poor performance and limits our abilities to optimize

We should either upgrade to material-ui 5 (renamed to @mui/material) or drop it completely and replace with something else (what?).

Summary

I was relying on the BackgroundImage in the PagerHero which was on the collection entity, but that has been removed from the component, and removed from the outer scope -- so how is one supposed to get the PageHero background image back without a bunch of work? Also the new sub categories in the PageHero seem not great and were way better in the menus. It is disappointing the PRs that are getting merged with no description, because it make the direction of this project and the chosen changed totally unclear. Seems every week the UI heads in some random new direction.

Steps to reproduce

Merge main branch into a fork that styles the site and watch for breaking changes and weird directions to head in.

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

Running pnpm run build:saleor-app-checkout at the root checkout of latest react-storefront canary branch yields typescript errors -- I tried this the other day too with the same result. Note: I am about to run the storefront but there is no/cart or checkout anymore without this app I believe, and it keeps giving me the same ESlint errors:

...
saleor-app-checkout:build: > [email protected] build /home/matteius/react-storefront/apps/saleor-app-checkout
saleor-app-checkout:build: > pnpm run i18n && next lint --dir . --quiet && npm run i18n && next build
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: > [email protected] i18n /home/matteius/react-storefront/apps/saleor-app-checkout
saleor-app-checkout:build: > pnpm run i18n:extract && pnpm run i18n:compile
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: > [email protected] i18n:extract /home/matteius/react-storefront/apps/saleor-app-checkout
saleor-app-checkout:build: > formatjs extract '{backend,config,content,frontend,graphql,pages,types,utils}/**/*.{js,jsx,ts,tsx}' --format transifex --id-interpolation-pattern '[folder]/[name]/[sha512:contenthash:base64:6]' --out-file content/locales/en.json
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: > [email protected] i18n:compile /home/matteius/react-storefront/apps/saleor-app-checkout
saleor-app-checkout:build: > formatjs compile-folder --ast --format transifex content/locales content/compiled-locales
saleor-app-checkout:build: 
saleor-app-checkout:build: info  - Loaded env from /home/matteius/react-storefront/apps/saleor-app-checkout/.env
saleor-app-checkout:build: warn  - You have enabled experimental features (esmExternals, externalDir) in next.config.js.
saleor-app-checkout:build: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
saleor-app-checkout:build: 
saleor-app-checkout:build: 
saleor-app-checkout:build: ./backend/payments/createOrderFromBody.ts
saleor-app-checkout:build: 11:36  Error: Unsafe argument of type `any` assigned to a parameter of type `string`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 11:53  Error: Unsafe argument of type `any` assigned to a parameter of type `number`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 19:40  Error: Unsafe argument of type `any` assigned to a parameter of type `string`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 
saleor-app-checkout:build: ./backend/payments/errors.ts
saleor-app-checkout:build: 7:37  Error: Invalid type "PaymentProviderID" of template literal expression.  @typescript-eslint/restrict-template-expressions
saleor-app-checkout:build: 14:31  Error: Invalid type "PaymentProviderID" of template literal expression.  @typescript-eslint/restrict-template-expressions
saleor-app-checkout:build: 25:31  Error: Invalid type "PaymentProviderID" of template literal expression.  @typescript-eslint/restrict-template-expressions
saleor-app-checkout:build: 
saleor-app-checkout:build: ./backend/payments/providers/adyen/middlewares.ts
saleor-app-checkout:build: 33:19  Error: Unsafe argument of type `any` assigned to a parameter of type `string`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 34:67  Error: Invalid type "any" of template literal expression.  @typescript-eslint/restrict-template-expressions
saleor-app-checkout:build: 
saleor-app-checkout:build: ./backend/payments/providers/stripe/verifySession.ts
saleor-app-checkout:build: 58:7  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
saleor-app-checkout:build: 
saleor-app-checkout:build: ./backend/payments/providers/stripe/webhookHandler.ts
saleor-app-checkout:build: 120:10  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
saleor-app-checkout:build: 
saleor-app-checkout:build: ./frontend/components/templates/PaymentProviderDetails/PaymentProviderDetails.tsx
saleor-app-checkout:build: 49:5  Error: Unsafe argument of type `any` assigned to a parameter of type `Iterable<readonly [PropertyKey, any]>`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 49:5  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
saleor-app-checkout:build: 60:15  Error: Unsafe argument of type `any` assigned to a parameter of type `{ [k: string]: any; } | { [x: string]: any; } | ResetAction<{ [k: string]: any; }> | undefined`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 
saleor-app-checkout:build: ./frontend/components/templates/PaymentProviderDetails/data.ts
saleor-app-checkout:build: 6:3  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
saleor-app-checkout:build: 17:29  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
saleor-app-checkout:build: 18:26  Error: Unsafe call of an `any` typed value.  @typescript-eslint/no-unsafe-call
saleor-app-checkout:build: 
saleor-app-checkout:build: ./pages/api/drop-in/adyen/payments/index.ts
saleor-app-checkout:build: 32:72  Error: Invalid type "any" of template literal expression.  @typescript-eslint/restrict-template-expressions
saleor-app-checkout:build: 
saleor-app-checkout:build: ./pages/api/drop-in/adyen/sessions.ts
saleor-app-checkout:build: 29:69  Error: Unsafe argument of type `any` assigned to a parameter of type `{ currency: string; totalAmount: number; checkoutId: string; redirectUrl: string; }`.  @typescript-eslint/no-unsafe-argument
saleor-app-checkout:build: 
saleor-app-checkout:build: info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
saleor-app-checkout:build:  ELIFECYCLE  Command failed with exit code 1.
saleor-app-checkout:build: ERROR: command finished with error: command (/home/matteius/react-storefront/apps/saleor-app-checkout) pnpm run build exited (1)
command (/home/matteius/react-storefront/apps/saleor-app-checkout) pnpm run build exited (1)

 Tasks:    3 successful, 4 total
Cached:    3 cached, 4 total
  Time:    7.469s 

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

Steps to reproduce

git clone https://github.com/saleor/react-storefront.git cd react-storefront

Setup .env

run pnpm run build:saleor-app-checkout

A link to a reproduction repository

No response

Output from envinfo

## System:
 - OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
 - CPU: (2) x64 AMD Ryzen 9 5900HS with Radeon Graphics
 - Memory: 3.84 GB / 5.67 GB
 - Container: Yes
 - Shell: 5.1.16 - /bin/bash
## Binaries:
 - Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
 - npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
## Browsers:
 - Firefox: 106.0

matteius@matteius-VirtualBox:~/react-storefront$ pnpm --version
7.13.5

Features:

• pages/api/dummy-pay.ts - API endpoint for dummy payment (creates a transaction)
• integrating the new payment method dummy into the existing structure (e.g. pages/api/pay.ts)
• added checkout-storefront/src/views/DummyPayment.tsx view with a simple form that lets you pay either the entirety or a fraction of the order's total price
• added the Views component in Root.tsx, as there are now three views that can be displayed: Checkout, OrderConfirmation, and DummyPayment. DummyPayment's URL is: host/checkout?order=:orderId&dummyPayment=true.

Media:

https://user-images.githubusercontent.com/44495184/193268382-4796058f-7378-4f9f-996a-3f5ccb047aca.mov

Questions:

1. How do we restrict access to the dummy payment provider? Currently, it's turned on by default. Should we add an env var like IS_DUMMY_PROVIDER_ON set to false by default?

This points Vercel to explicitly set Next as framework in deployment context

Why this is needed

Deploy button api can't specify framework nor output directory settings. In monorepo, when react-storefront is being spawned, Next creates deployment with framework "Other" which is probably a bug.

It was reported to Vercel, but this local fix is transparent and fixes the problems

It will also be needed to close https://github.com/saleor/react-storefront/issues/466

Hi,

I tried to set up the checkout and checkout-app according to the deployment manual in README. However, I can't load or save settings in checkout-app (in dashboard).

The error message like this is quite useless. I have tried to reinstall the app, generate fresh authToken, redeploy both of vercel apps, to no avail.

What is actually wrong, and what can I do to fix it? What is unauthenticated?

Thank you!

EDIT: I can see multiple requests in browser console:

GET https://saleor-checkout-app.vercel.app/api/payment-provider-settings
HTTP/401 Unauthenticated
{"error":{"message":"Unauthenticated"}}

POST https://saleor-checkout-app.vercel.app/api/set-payment-provider-settings
HTTP/401 Unauthenticated
{"error":{"message":"Unauthenticated"}}

Summary

⠇ Setting up the Git repository... ERROR error: unknown option `initial-branch' usage: git init [-q | --quiet] [--bare] [--template=] [--shared[=]] []

--template <template-directory>
                      directory from which templates will be used
--bare                create a bare repository
--shared[=<permissions>]
                      specify that the git repository is to be shared amongst several users
-q, --quiet           be quiet
--separate-git-dir <gitdir>
                      separate git dir from working tree
--object-format <hash>
                      specify the hash algorithm to use

If you think this is a bug, report it on GitHub: https://github.com/saleor/saleor-cli/issues

CLI Docs: https://docs.saleor.io/docs/3.x/cli

Steps to reproduce

saleor storefront create front

A link to a reproduction repository

No response

Output from envinfo

No response

Summary

The robots.txt file contains hard-coded value with https://localhost:3001 which is invalid if the deployment is not local and if the local deployment doesn't support HTTPS.

File: https://github.com/saleor/react-storefront/blob/6f00e6bc0f1d3f71d3cfe37f1b2ccec2eb2aa4d2/apps/storefront/public/robots.txt#L11-L14

Steps to reproduce

1. Build the app with a different domain
2. Go to /robots.txt
3. It should point to the wrong domain than the actual one

A link to a reproduction repository

No response

Output from envinfo

No response

Since Saleor SDK is no longer maintained we need to remove it altogether from checkout. We already have following stuff replaced: passwordResetRequest, passwordReset and userRegister. We need to implement the login flow because currently we're using: login, logout and authState with user and authenticating props. That'll also allow us to remove anything connected to apollo client.

Currently the register flow is sitting within the login / register / guest user sections but it's submission happens on checkout "pay" click. The flow is weird and difficult to both code and figure out a proper UX for it so we decided to change it's flow to a more "normal" one. New desings in figma