vendure-ecommerce / storefront-remix-starter Goto Github PK

I was able to get it deployed to Cloudflare Pages(I had to select the v1 build system from settings).
Assets also got uploaded

But the URL is returning 404.
I think the demo instance provided by the repo is also showing the same behaviour. https://remix-storefront.vendure.io
What could be the issue?
I attempted the same process with Netlify, and encountered the same behavior.

Hi,

I'm trying to run this storefront in a docker container but I'm nor sure what npm goal I should be running to pickup the .env variables are run as production

Any help would be great

Problem

After a clean install the terminal displays the following errors:

Error: Cannot find package 'accept-language-parser' imported from /home/dev-adrian/Documents/Mlabs/Gitea/mlabs-facturacion-electronica/apps/storefront-remix-starter/build/index.js
Did you mean to import [email protected]/node_modules/accept-language-parser/index.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:916:9)
    at moduleResolve (node:internal/modules/esm/resolve:973:20)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

> storefront-remix@ dev /home/dev-adrian/Documents/Mlabs/Gitea/mlabs-facturacion-electronica/apps/storefront-remix-starter
> remix dev


 💿  remix dev

⚠️ Route ID Collision: "routes/account"

The following routes all define the same Route ID, only the first one will be used

🟢 routes/account/index.tsx
⭕️️ routes/account.tsx

⚠️ Route ID Collision: "routes/checkout"

The following routes all define the same Route ID, only the first one will be used

🟢 routes/checkout/index.tsx
⭕️️ routes/checkout.tsx

 info  building...
 info  built (3.5s)
Error: Cannot find package 'intl-parse-accept-language' imported from /home/dev-adrian/Documents/Mlabs/Gitea/mlabs-facturacion-electronica/apps/storefront-remix-starter/build/index.js
Did you mean to import [email protected]/node_modules/intl-parse-accept-language/dist/index.js?
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:916:9)
    at moduleResolve (node:internal/modules/esm/resolve:973:20)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

Possible solution

add to package.json:

accept-language-parser
intl-parse-accept-language

This line is causing an error in the site when CloudFlare worker tries to access process.env (which CloudFlare workers do not have)

I was able to make the sign-in functionality work by removing lines 13-18. Not sure if there's a way to still keep this "demo url" check in without causing problems for CF?

Steps to reproduce:

1. Navigate to https://remix-storefront.vendure.io
2. Add an items to cart
3. Navigate to checkout page
4. Remove all items from the cart
5. Enter all required details, select shipping method
6. Click proceed to payment
7. Proceed to Payment

Expected result:
Proceed to payment button disabled

Actual Result:
Proceeding to payment and getting an 400 Bad request after payment

The user is currently able to log out from /account/history, /account/addresses and /account/password, so this mechanism should be revised:

Otherwise the log-out does not get reflected until a full refresh.

Also, not re-validating root upon removing all items from the cart during /checkout gets you redirected to root and the activeOrderFetcher being hung in loading state. This issue might be relevant: remix-run/remix#8298

https://remix-storefront.vendure.io/

hello folks, when i run
npm run dev

i got this:

dev
concurrently "npm run dev:css" "remix dev"

sh: concurrently: command not found

Hello,

Another issue with mixed content loading from browser.

VENDURE_API_URL=https://api-store.abc.com/shop-api
NODE_ENV=development

Although it's set as https, but most of images are being loaded via "http://api-store.abc.com/"

Any idea how to fix it?

Thank you.

If you go through the checkout process, up to payment screen, then go back to the store, and try adding some more products to the cart, you get hit with Order contents may only be modified when in the "AddingItems" state.

I think this makes sense since Vendure has the order state machine, however this needs to be fixed for production usage.

All I can think of is special casing the code that deals with adding a product to the cart, checking the order state, and transitioning back out of the payment order state.

Does this solution make sense or do you have a better idea how to tackle this?

Hi all. Been running into an issue after deploying this site on CloudFlare. Wanted to share in case anyone else runs into this. because it really had me scratching my head. Any maybe there's a way we can patch this up (unless this is just a "me" issue - I am a backend dev new to frontend development)

I had my own instance of vendure api running on a cloud url. When I would leave the storefront tab inactive for ~30 secs to a minute, and then came back and pressed a button for one of my own categories (eg jackets), I would get a 404.

Then, I would refresh the page and everything would start working again. Now, I think this is because when deployed on CFWorkers, due to their serverless nature, the worker shuts down after some inactivity. When hitting a GQL call from "cold start", the Remix application seems to be loading in the API_URL in here in such a way that the DEMO_API_URL gets loaded, therefore causing problems and sometimes 404s (since demo api doesn't have some resources that my api has).

It seems that the API_URL gets set here usually, but not on the cold starts for some reason.

I hacked around this by setting DEMO_API_URL to my actual API url, and all is working as intended now. Anyone have thoughts on this or experience the same problem? Perhaps there is a better fix or maybe I'm misunderstanding something.

When customer is logged in and has added product to cart and gets to /checkout and they have lets say 1 shipping address they cant add a new shipping address on the page i think the form should be added even for signed in customers

Hi, I'm trying to deploy storefront-remix-starter on Vercel and unable to do so.

Here is the error I'm getting

Error: Error loading Remix config at /vercel/path0/remix.config.js
--
09:05:25.419 | Error: Cannot find module '@remix-run/dev/dist/config/routes'
09:05:25.419 | Require stack:
09:05:25.420 | - /vercel/path0/node_modules/@remix-run/v1-route-convention/dist/index.js
09:05:25.420 | at Object.readConfig (/vercel/path0/node_modules/@vercel/remix-run-dev/dist/config.js:69:13)
09:05:25.420 | at async Object.build (/vercel/path0/node_modules/@vercel/remix-run-dev/dist/cli/commands.js:140:18)
09:05:25.420 | at async Object.run (/vercel/path0/node_modules/@vercel/remix-run-dev/dist/cli/run.js:201:7)
09:05:25.440 | error Command failed with exit code 1.
09:05:25.440 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
09:05:25.461 | Error: Command "yarn run build" exited with 1

I have customized remix.config.js as follows:

import { createRoutesFromFolders } from '@remix-run/v1-route-convention';

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const bareConfig = {
  serverDependenciesToBundle: [
    'remix-i18next',
    '@remix-validated-form/with-zod',
  ],
  tailwind: true,
  routes(defineRoutes) {
    // uses the v1 convention, works in v1.15+ and v2
    return createRoutesFromFolders(defineRoutes);
  },
};

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const commonConfig = {
  appDirectory: 'app',
  serverModuleFormat: 'esm',
  ...bareConfig,
};

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const cloudflarePagesConfig = {
  serverBuildPath: 'functions/[[path]].js',
  serverPlatform: 'neutral',
  server: './server-cloudflare-pages.js',
  ignoredRouteFiles: ['**/.*'],
  serverMinify: true,
  ...commonConfig,
};
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const vercelConfig = {
  ignoredRouteFiles: ['**/.*'],
  ...bareConfig,
};
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const netlifyConfig = {
  serverBuildTarget: 'netlify',
  server: './server-netlify.js',
  ignoredRouteFiles: ['**/.*'],
  ...commonConfig,
};
/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const devConfig = {
  appDirectory: 'app',
  serverModuleFormat: 'cjs',
  devServerPort: 8002,
  ignoredRouteFiles: ['.*'],
  ...commonConfig,
};

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const buildConfig = {
  appDirectory: 'app',
  assetsBuildDirectory: 'public/build',
  publicPath: '/build/',
  serverBuildDirectory: 'build',
  ignoredRouteFiles: ['.*'],
  ...commonConfig,
};

function selectConfig() {
  const ENV = process.env?.NODE_ENV || process.env?.VERCEL_ENV;
  if (!['preview', 'development', 'production'].includes(ENV))
    throw new Error(`Unknown ENV: ${ENV}`);
  if (process.env.CF_PAGES) return cloudflarePagesConfig;
  if (process.env.NETLIFY) return netlifyConfig;
  if (process.env.VERCEL) return vercelConfig;
  if (ENV === 'development') return devConfig;
  if (!process.env.CF_PAGES && !process.env.NETLIFY) return buildConfig;
  throw new Error(`Cannot select config`);
}

export default selectConfig();

The not found module is from this import:
import { createRoutesFromFolders } from '@remix-run/v1-route-convention';

It seems like more of Remix/Vercel issue than the starter, do not have enough experience with Remix to tell more.

Here is the repo code: https://github.com/dmi3y/storefront-remix-starter
And Vercel deploy: https://vercel.com/dmi3ii/storefront-remix-starter/5cZLctcchyQrhrpMFMq6X8RqmsUk#L58

Hello,

How could i make product image display based on variant selection ?
For now. it's only show main product image.

Ex: i add image for each item variant

But it doesn't pickup the item variant image from UI.

Thank you.

Hello,

It's very nice design !
Is it ready for production use?

Thank you.

Hi. First of all, I'm a noob with this, so maybe my question is stupid, so sorry in advance, but I cannot get storefront to deploy either on cloudflare or netlify. I can deploy in local server, but I would like to test it in real server. I cloned the repo, and selected it from cf/nf, but I get following errors in cf, so I guess I'm missing something:

23:08:39.603 | Cloning repository...
-- | --
23:08:40.498 | From https://github.com/stojshic/storefront-remix
23:08:40.499 | * branch            52e1d65142ededcbae9359ff344aef50b867f1dd -> FETCH_HEAD
23:08:40.499 |  
23:08:40.584 | HEAD is now at 52e1d65 Update package.json
23:08:40.585 |  
23:08:40.700 |  
23:08:40.735 | Success: Finished cloning repository files
23:08:41.464 | Detected the following tools from environment: [email protected], [email protected]
23:08:41.464 | Installing nodejs 16.15.0
23:08:42.607 | Trying to update node-build... ok
23:08:42.918 | Downloading node-v16.15.0-linux-x64.tar.gz...
23:08:42.918 | -> https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-x64.tar.gz
23:08:44.264 |  
23:08:44.267 | WARNING: node-v16.15.0-linux-x64 is in LTS Maintenance mode and nearing its end of life.
23:08:44.267 | It only receives *critical* security updates, *critical* bug fixes and documentation updates.
23:08:44.267 |  
23:08:44.267 | Installing node-v16.15.0-linux-x64...
23:08:45.129 | Installed node-v16.15.0-linux-x64 to /opt/buildhome/.asdf/installs/nodejs/16.15.0
23:08:45.130 |  
23:08:47.382 | Preparing [email protected] for immediate activation...
23:08:48.061 | Installing project dependencies: yarn
23:08:48.868 | ➤ YN0070: Migrating from Yarn 1; automatically enabling the compatibility node-modules linker 👍
23:08:48.868 |  
23:08:49.021 | ➤ YN0000: ┌ Resolution step
23:08:53.216 | ➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
23:08:53.449 | ➤ YN0061: │ @npmcli/move-file@npm:1.1.2 is deprecated: This functionality has been moved to @npmcli/fs
23:08:54.015 | ➤ YN0032: │ node-addon-api@npm:1.7.2: Implicit dependencies on node-gyp are discouraged
23:08:58.134 | ➤ YN0061: │ rollup-plugin-inject@npm:3.0.2 is deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
23:08:58.688 | ➤ YN0061: │ sourcemap-codec@npm:1.4.8 is deprecated: Please use @jridgewell/sourcemap-codec instead
23:09:05.328 | ➤ YN0002: │ @graphql-codegen/cli@npm:2.16.4 [9c4ba] doesn't provide @types/node (p62df1), requested by cosmiconfig-typescript-loader
23:09:05.329 | ➤ YN0002: │ @graphql-codegen/cli@npm:2.16.4 [9c4ba] doesn't provide cosmiconfig-toml-loader (p99e8d), requested by graphql-config
23:09:05.329 | ➤ YN0002: │ @graphql-codegen/cli@npm:2.16.4 [9c4ba] doesn't provide typescript (p07abe), requested by cosmiconfig-typescript-loader
23:09:05.329 | ➤ YN0002: │ @graphql-tools/graphql-tag-pluck@npm:7.4.3 [bcf54] doesn't provide @babel/core (pd3410), requested by @babel/plugin-syntax-import-assertions
23:09:05.329 | ➤ YN0002: │ storefront-remix-starter@workspace:. doesn't provide @cloudflare/workers-types (pb2d28), requested by @remix-run/cloudflare
23:09:05.330 | ➤ YN0002: │ storefront-remix-starter@workspace:. doesn't provide @cloudflare/workers-types (pa67dc), requested by @remix-run/cloudflare-pages
23:09:05.330 | ➤ YN0002: │ storefront-remix-starter@workspace:. doesn't provide @types/node (p32ca7), requested by ts-node
23:09:05.330 | ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements  for details, where  is the six-letter p-prefixed code
23:09:05.337 | ➤ YN0000: └ Completed in 16s 315ms
23:09:05.427 | ➤ YN0000: ┌ Post-resolution validation
23:09:05.427 | ➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
23:09:05.428 | ➤ YN0000: └ Completed
23:09:05.428 | ➤ YN0000: Failed with errors in 16s 409ms
23:09:05.540 | Error: Exit with error code: 1
23:09:05.541 | at ChildProcess. (/snapshot/dist/run-build.js)
23:09:05.541 | at Object.onceWrapper (node:events:652:26)
23:09:05.541 | at ChildProcess.emit (node:events:537:28)
23:09:05.541 | at ChildProcess._handle.onexit (node:internal/child_process:291:12)
23:09:05.553 | Failed: build command exited with code: 1
23:09:06.614 | Failed: error occurred while running build command

And this one on netlify:

7:56:51 PM: Build ready to start
7:57:40 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
7:56:52 PM: build-image version: 20e1f1f500e4cbad9ea8a99bd40807bef3093551 (focal)
7:56:52 PM: buildbot version: d7125d73ee51e5ae94a98ff24da5d2bcd8321340
7:56:52 PM: Fetching cached dependencies
7:56:52 PM: Failed to fetch cache, continuing with build
7:56:52 PM: Starting to prepare the repo for build
7:56:52 PM: No cached dependencies found. Cloning fresh repo
7:56:52 PM: git clone --filter=blob:none https://github.com/stojshic/storefront-remix
7:56:52 PM: Preparing Git Reference refs/heads/master
7:56:54 PM: Starting to install dependencies
7:56:54 PM: Python version set to 3.8
7:56:54 PM: Attempting Ruby version 2.7.2, read from environment
7:56:54 PM: Using Ruby version 2.7.2
7:56:55 PM: Started restoring cached go cache
7:56:55 PM: Finished restoring cached go cache
7:56:56 PM: Installing Go version 1.19.12 (requested 1.19.x)
7:57:01 PM: go version go1.19.12 linux/amd64
7:57:01 PM: Using PHP version 8.0
7:57:02 PM: Attempting Node.js version '18.12.0' from .node-version
7:57:02 PM: Downloading and installing node v18.12.0...
7:57:02 PM: Downloading https://nodejs.org/dist/v18.12.0/node-v18.12.0-linux-x64.tar.xz...
7:57:02 PM: Computing checksum with sha256sum
7:57:02 PM: Checksums matched!
7:57:04 PM: Now using node v18.12.0 (npm v8.19.2)
7:57:04 PM: Enabling Node.js Corepack
7:57:04 PM: Started restoring cached build plugins
7:57:04 PM: Finished restoring cached build plugins
7:57:04 PM: Started restoring cached corepack dependencies
7:57:04 PM: Finished restoring cached corepack dependencies
7:57:04 PM: Started restoring cached yarn cache
7:57:04 PM: Finished restoring cached yarn cache
7:57:05 PM: No yarn workspaces detected
7:57:05 PM: Started restoring cached node modules
7:57:05 PM: Finished restoring cached node modules
7:57:05 PM: Installing npm packages using Yarn version 1.22.19
7:57:05 PM: yarn install v1.22.19
7:57:05 PM: [1/5] Validating package.json...
7:57:05 PM: [2/5] Resolving packages...
7:57:06 PM: [3/5] Fetching packages...
7:57:25 PM: [4/5] Linking dependencies...
7:57:25 PM: warning  > @remix-run/[email protected] has unmet peer dependency @cloudflare/workers-types@^2.0.0 || ^3.0.0.
7:57:25 PM: warning  > @remix-run/[email protected] has unmet peer dependency @cloudflare/workers-types@^3.0.0.
7:57:25 PM: warning @graphql-codegen/cli > [email protected] has unmet peer dependency @types/node@*.
7:57:25 PM: warning @graphql-codegen/cli > [email protected] has unmet peer dependency cosmiconfig-toml-loader@^1.0.0.
7:57:25 PM: warning  > [email protected] has unmet peer dependency @types/node@*.
7:57:30 PM: [5/5] Building fresh packages...
7:57:30 PM: $ husky install
7:57:30 PM: husky - Git hooks installed
7:57:30 PM: Done in 25.12s.
7:57:30 PM: npm packages installed using Yarn
7:57:31 PM: Install dependencies script success
7:57:31 PM: Starting build script
7:57:31 PM: Detected 1 framework(s)
7:57:32 PM: remix at version 1.11.1
7:57:32 PM: Section completed: initializing
7:57:33 PM: ​
7:57:33 PM: Netlify Build                                                 
7:57:33 PM: ────────────────────────────────────────────────────────────────
7:57:33 PM: ​
7:57:33 PM: ❯ Version
7:57:33 PM:   @netlify/build 29.20.6
7:57:33 PM: ​
7:57:33 PM: ❯ Flags
7:57:33 PM:   baseRelDir: true
7:57:33 PM:   buildId: 64e253e22bb02700089bc0dd
7:57:33 PM:   deployId: 64e253e22bb02700089bc0df
7:57:33 PM: ​
7:57:33 PM: ❯ Current directory
7:57:33 PM:   /opt/build/repo
7:57:33 PM: ​
7:57:33 PM: ❯ Config file
7:57:33 PM:   /opt/build/repo/netlify.toml
7:57:33 PM: ​
7:57:33 PM: ❯ Context
7:57:33 PM:   production
7:57:33 PM: ​
7:57:33 PM: build.command from netlify.toml                               
7:57:33 PM: ────────────────────────────────────────────────────────────────
7:57:33 PM: ​
7:57:33 PM: $ yarn run build:nf
7:57:33 PM: yarn run v1.22.19
7:57:33 PM: $ cross-env NETLIFY=1 remix build
7:57:34 PM: Building Remix app in production mode...
7:57:34 PM: Built in 614ms
7:57:34 PM: Done in 1.34s.
7:57:34 PM: ​
7:57:34 PM: (build.command completed in 1.5s)
7:57:34 PM: ​
7:57:34 PM: Functions bundling                                            
7:57:34 PM: ────────────────────────────────────────────────────────────────
7:57:34 PM: ​
7:57:34 PM: The Netlify Functions setting targets a non-existing directory: netlify/functions
7:57:34 PM: ​
7:57:34 PM: Packaging Functions from .netlify/functions-internal directory:
7:57:34 PM:  - server.js
7:57:34 PM: ​
7:57:35 PM: ​
7:57:35 PM: Dependencies installation error                               
7:57:35 PM: ────────────────────────────────────────────────────────────────
7:57:35 PM: ​
7:57:35 PM:   Error message
7:57:35 PM:   A Netlify Function failed to require one of its dependencies.
7:57:35 PM:   Please make sure it is present in the site's top-level package.json.
​
7:57:35 PM:   In file /opt/build/repo/.netlify/functions-internal/server.js
7:57:35 PM:   Cannot find module '@cloudflare/workers-types'
7:57:35 PM:   Require stack:
7:57:35 PM:   - /opt/buildhome/node-deps/node_modules/@netlify/zip-it-and-ship-it/dist/runtimes/node/bundlers/zisi/resolve.js
7:57:35 PM: ​
7:57:35 PM:   Resolved config
7:57:35 PM:   build:
7:57:35 PM:     command: yarn run build:nf
7:57:35 PM:     commandOrigin: config
7:57:35 PM:     publish: /opt/build/repo/public
7:57:35 PM:     publishOrigin: config
7:57:35 PM:   functionsDirectory: /opt/build/repo/netlify/functions
7:57:35 PM:   headers:
7:57:36 PM:     - for: /build/*
      values:
        Cache-Control: public, max-age=31536000, s-maxage=31536000
  headersOrigin: config
  redirects:
    - from: /*
      status: 200
      to: /.netlify/functions/server
  redirectsOrigin: config
Caching artifacts
7:57:36 PM: Started saving node modules
7:57:36 PM: Finished saving node modules
7:57:36 PM: Started saving build plugins
7:57:36 PM: Finished saving build plugins
7:57:36 PM: Started saving corepack cache
7:57:36 PM: Finished saving corepack cache
7:57:36 PM: Started saving yarn cache
7:57:38 PM: Finished saving yarn cache
7:57:38 PM: Started saving pip cache
7:57:38 PM: Finished saving pip cache
7:57:38 PM: Started saving emacs cask dependencies
7:57:38 PM: Finished saving emacs cask dependencies
7:57:38 PM: Started saving maven dependencies
7:57:38 PM: Finished saving maven dependencies
7:57:38 PM: Started saving boot dependencies
7:57:38 PM: Finished saving boot dependencies
7:57:38 PM: Started saving rust rustup cache
7:57:38 PM: Finished saving rust rustup cache
7:57:38 PM: Started saving go dependencies
7:57:38 PM: Finished saving go dependencies
7:57:40 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
7:57:40 PM: Failing build: Failed to build site
7:57:41 PM: Finished processing build request in 48.733s

Issue Description:
We have a requirement to implement a feature that allows us to restrict the shipping of a particular product to a specific country. This feature is important to ensure that certain products comply with legal restrictions, or we need to limit their distribution for various reasons.

Proposed Solution:

To implement this feature, we can follow these steps:

Product Configuration: In our product management system, we need to add a new field or attribute for products that specifies the country to which the product can be shipped. This attribute should be associated with each product in the product database.

Checkout Process: During the checkout process, we need to check the customer's shipping address and compare it with the country restriction set for the product. If the customer's shipping address does not match the allowed shipping country, we should display an error message and prevent the purchase of that product.

Admin Dashboard: We should provide an interface in our admin dashboard that allows administrators to set the shipping restrictions for each product. This could be a dropdown or a checkbox list of countries where the product can be shipped.

While trying the storefront and adding Mollie payments, I hit this issue:

[1] TypeError: Cannot read properties of undefined (reading 'exception')
[1]     at /home/joao/dev/storefront-remix-starter/app/graphqlWrapper.ts:92:47
[1]     at processTicksAndRejections (node:internal/process/task_queues:95:5)
[1]     at action3 (/home/joao/dev/storefront-remix-starter/app/routes/checkout/payment.tsx:48:24)

The issue is in this code:

            console.log(
                response.errors[0].extensions.exception.stacktrace.join('\n'),
            );

There is no extensions field in the error object, so thats why it fails. Where is this supposed to come from?

See this discussion for the various steps which need to be documented:

• vendure-ecommerce/vendure#1924 (reply in thread)

Hello,

I am getting run build error after updated the code
How could i correct it? Thank you.

✘ [ERROR] Could not resolve "@stripe/react-stripe-js"
[1]
[1]     app/components/checkout/stripe/CheckoutForm.tsx:5:7:
[1]       5 │ } from '@stripe/react-stripe-js';
[1]         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~
[1]
[1]   You can mark the path "@stripe/react-stripe-js" as external to exclude it from the bundle, which will remove this error.
[1]
[1]  ✘ [ERROR] Could not resolve "@stripe/react-stripe-js"
[1]
[1]     app/components/checkout/stripe/StripePayments.tsx:1:25:
[1]       1 │ import { Elements } from '@stripe/react-stripe-js';
[1]         ╵                          ~~~~~~~~~~~~~~~~~~~~~~~~~
[1]
[1]   You can mark the path "@stripe/react-stripe-js" as external to exclude it from the bundle, which will remove this error.
[1]
[1]  ✘ [ERROR] Could not resolve "@stripe/stripe-js"
[1]
[1]     app/components/checkout/stripe/StripePayments.tsx:2:35:
[1]       2 │ import { loadStripe, Stripe } from '@stripe/stripe-js';
[1]         ╵                                    ~~~~~~~~~~~~~~~~~~~
[1]
[1]   You can mark the path "@stripe/stripe-js" as external to exclude it from the bundle, which will remove this error.
[1]
[1]
[1] Build failed with 3 errors:
[1] app/components/checkout/stripe/CheckoutForm.tsx:5:7: ERROR: Could not resolve "@stripe/react-stripe-js"
[1] app/components/checkout/stripe/StripePayments.tsx:1:25: ERROR: Could not resolve "@stripe/react-stripe-js"
[1] app/components/checkout/stripe/StripePayments.tsx:2:35: ERROR: Could not resolve "@stripe/stripe-js"
[1] 💿 Built in 2.1s

Hello,

Another issue i am facing at checkout page, after inputing user email, first name and last name, then press "Tab" button to continue filling Shipping info, then the item was removed in "Order Summary"
Please see screenshot for more detail.

1. before pressing tab to move to shipping info

2. pressed tab

Any idea how could i correct it?
Thank you.

Heyo! 👋

Noticed that https://remix-storefront.vendure.io/sitemap.xml currently just errors out.

Just an idea. 😄 👍

New classes don't work. If I use classes that were already part of the project they work but writing any new classes will result in no output for some reason

Hello,

I just did fresh installation, this interface is really fast, however i am getting issue with Navbar, and it only shows in Private browsing, please refer screenshot. This also happens same with your demo site.

Hi, i don't know if i should ask here or in Vendure repo i have a question about how to set the currency code in the header so that the vendure RequestContext can receive the new currency code, in the documents they mentions about using query parameter but it doesn't work

firstly by any ?currencyCode=XXX query parameter on the request

can someone guide me on this? Much appreciated for your help

Since CF workers are created per use, they are also lost and any globals set in the original function is also lost. The only way to propagate the VENDURE_API in the graphqlWrapper is by passing it through the context.cloudflare.env. The only fix I found for this is to pass the context along with the request in every function call.

Hello & congrats,

this repo was a nice surprise to discover.

Looking though the code and docs, I cannot find any setting for channel.

Is there a way, per now, to configure using only one Vendure channel?

Cheers,
Flemming

Hello,

I am trying to achieve, on customer registration;

• Register
• Login the user
• Redirect to the Account page

I am actually able to Register > Login > Redirect to Account page but the problem is remix doesn't reload the page in a real meaning (remix overwrites any redirect to 204). I've found that I need to reload the page either using 'redirect' somewhere else than the 'action' or 'loader' functions but I am not able to achieve this on the return of Form submit. I thought might be useful for someone else to achieve this in the future too.

Here's my code;

https://stackoverflow.com/questions/71528730/how-to-redirect-from-a-utility-function-in-remix-run

Edit: The account icon shows "My Account" as expected if I refresh the page afterward.

Thanks

Remix V2 will introduce a couple of breaking changes. Most of them can already be enabled via feature flags in V1 for preparation & testing: https://remix.run/docs/en/main/pages/v2

Hello,

When I run npm run generate command I get following errors.

> generate
> graphql-codegen --config codegen.yml

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate app/generated/graphql.ts
    ✖ Failed to load schema
    ◼ Load GraphQL documents
    ◼ Generate
  ❯ Generate app/generated/schema.graphql
    ✖ Failed to load schema
    ◼ Load GraphQL documents
    ◼ Generate

I didn't change anything in app/providers. I only upgraded packages. So how can I resolve it?

Setting .env API_URL works in local development, but the same accessing mechanism, process.env, doesn't work on Cloudflare Pages deployment.

The environment variables are set in CF build settings, and I've tried with both build and build:cf without any luck. Googling gave me little, apart from that CF need special treatment due to CF Workers running V8, and not Node.

Not sure if this is on my end entierly, but tought I'd issue it as I am affected =)

Cheers,
Flemming

Edit: It's explained here https://remix.run/docs/en/v1/guides/envvars

Hello,

This storefront is completely fast, really love it !
Would it be planed to add support for customer account management?

Thank you.

How is the application working with https? Is through express or nginx ?

Hi there,

I am interested in integrating Facebook login into my Remix storefront by utilizing remix-auth-socials. However, since Vendure is the default GraphQL API, there does not appear to be a mutation for social authentication. Could you please provide me with guidance on how to achieve this?

In checkout, upon successful payment by credit card with stripe, the navigation goes to "/checkout/confirmation/ZAK6VT93QBKR4S5Q, but fails with an error.
But the order in the admin dashboard is fine and the payment is settled. After a browser refresh, the checkout page shows correctly without error.

Link to the slack discussion with more details:
https://vendure-ecommerce.slack.com/archives/CKYMF0ZTJ/p1668072138853759

This issue concerns code review feedback for the Vendure storefront Remix starter. The feedback is intended to improve the Remix starter by providing a to-do list.

If you would like to be assigned to one of these tasks, please leave a comment.

When assigned, each task is further refined and broken down into subtasks related to a specific small unit of work.

Depending on the interest in taking on tasks, the list can be expanded with more improvements!

• Improve - global app data - provisioning and type safety
  Description

  Global app data provision via outlet and component properties has become less efficient. In this case, applying a root context provider is a good solution. Because the root context can be provided to any child component via a hook. As a bonus, a custom useRootContext hook ensures consistent global app data type safety across every component.

  • Implement root context provider

    Code example /app/contexts/root-context.ts

    import { type Dispatch, type SetStateAction, createContext, useContext } from "react";
    
    type RootContextType = {
        cartOpenState: [boolean, Dispatch<SetStateAction<boolean>>];
        orderService: OrderServiceType;
    }
    
    export const RootContext = createContext<RootContextType | null>(null);
    
    export const useRootContext = () => {
        const rootContext = useContext(RootContext);
    
        if (!rootContext) {
            throw new Error(
                "useRootContext has to be used within <RootContext.Provider>"
            );
        }
    
        return rootContext;
    };

    Code example /app/root.tsx

    import { RootContext } from "~/contexts/RootContext";
    
    export default function App() {
        const cartOpenState = useState(false);
        const orderService = useOrderService();
    
        return (
            <RootContext.Provider value={{
                cartOpenState,
                orderService,
            }} >
                <html>
    
                </html>
            </RootContext.Provider>
        );
    }

  • Refactor outlets and components to apply the useRootContext hook.

    Code example /app/components/Header.tsx

    import { useRootContext } from '~/contexts/RootContext'
    
    export default function Header() {
        const {
            cartOpenState: [cartOpen, setCartOpen],
            orderService,
        } = useRootContext();
    
        return (
            <>
                <Cart open={cartOpen} setOpen={setCartOpen} />
    
                <header>
    
                </header>
            </>
        )
    }

• Add checkout end-to-end tests
  Description

  Before refactoring the checkout form, it is good to first add an end-to-end test. After looking at the code and some manual testing, you must be able to add failing test cases.

  • Test form submission as a logged in user, next as a guest with the same email address.
  • Test changing customer form fields without leaving input focus and clicking immediately the submit button.

  Guide

  The official Remix templates are a great start as they include testing and Github workflows. Create in a temporary folder a new Remix app with the blues-stack template.

  npx create-remix@latest --template remix-run/blues-stack

  Follow the README.md instructions and run the end-to-end tests. Next, copy the relevant code in your the Vendure Remix starter project and add the failing test cases.

• Improve checkout form - on blur - submission

  • Prerequisite is understanding Remix - form vs fetcher - best practices

• Improve checkout form client/server side validation

  • Implement zod client/server side form validation

• Improve checkout form client/server side error handling.

  • Show a clear client side error message
    • on client/server form validation failure
    • on server error, e.g. Vendure - GraphQL - shop API failure

• Support default configurable guest checkout strategies

  • Show a login button when guest email is not available

• Improve Remix route revalidation

• Improve multilingual support

This expression never yields false:

...since the initialized value is 0, not null:

Setting null as the initial value messes up the address selectors default selection, so this needs to be taken care of as well.

It would be wise, I suppose, to furthermore switch all the validations to Remix ValidatedForm / Zod...

Graphql codegen has a client preset plugin which has the following advantage over the current generic SDK plugin:

• It "automatically" types the graphql operation, so it is explicit in where a particular gql document is actually being used in the app. Makes things more maintainable.
• Less indirection in the API layer. You just pass the operation constant to a fetch function.

This task would involve:

1. Installing the client preset per the docs
2. Updating the codegen config
3. In all the "providers" files, replace the gql template function with a graphql function call.
4. Remove calls to the "sdk" object, and instead pass the query/mutation constants directly to the fetch wrapper.

Vendure v2.0 is in beta and will be released fairly soon.

This issue is intended to collect notes on what needs to change in this project to support Vendure v2.

One I found so far:

this line needs to change to:

gql`
-  mutation setOrderShippingMethod($shippingMethodId: ID!) {
+  mutation setOrderShippingMethod($shippingMethodId: [ID!]!) {
    setOrderShippingMethod(shippingMethodId: $shippingMethodId) {
      ...OrderDetail
      ... on ErrorResult {
        errorCode
        message
      }
    }
  }
`;

Hello, I think it's important to add the option to translate the hard coded texts on template, based on the browser language or fixed by the store owner.

I don't know if you already have plans for this, but I would like to do this using remix-i18next.

I have a project in Brazilian Portuguese, so in addition to making the store i18n, it also helps when I need to merge my code with this repository.

When I submit form

https://remix-storefront.vendure.io/sign-up

Application Error
Error: Unexpected Server Error
at dS (worker.mjs:1399:108)
at async worker.mjs:1531:17
at async a (worker.mjs:16068:22)
at async worker.mjs:16072:14
at async next (worker.mjs:21892:26)

Hello,

Thanks for your great project. I know there is a lot of works need to be done.

If possible, please consider to add few more features.

1. Pages content management
2. Products comment or review management

Thanks again.

Hello,

I am getting following error from browser console, not sure if it's reason why the "Wish list" feature not functional or it's still not deployed.

Warning: Did not expect server HTML to contain a <script> in <body>.
footer
Footer@https://store.abc.com/build/root-REVYTQJD.js:282:16
body
html
App@https://store.abc.com/build/root-REVYTQJD.js:446:55
RemixRoute@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:2588:20
Routes2@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:2572:7
Router@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:688:7
RemixCatchBoundary@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:1081:28
RemixErrorBoundary@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:1007:5
RemixEntry@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:2468:20
RemixBrowser@https://store.abc.com/build/_shared/chunk-AM7YLLF5.js:3223:27 react-dom.development.js:67:29

How could i solve it?

Thank you.

Hey, we're working on implementing Vendure and we started using this remix storefront to get started. In our case, we started with porting the fly out cart to its own page and checkout since we have our own product detail pages (PDP) already.

So, while porting cart and checkout we created a hard coded product page so we could add things to cart to test the cart and we found what seems like a bug. In this base stock storefront app, if you go from home page or PLP > PDP > Add to cart > Cart everything works. If you clear cookies and db sessions in Vendure or otherwise start on a PDP (without loading homepage or PLP pages) > Add to cart > Cart, there seems to be a problem with the cart reading the session properly. You can add to cart, and it makes the correct API request, but if you refresh the page, the cart is empty.

I think it's related to not loading the activeCustomer correctly on the PDP. We've had multiple devs able to reproduce this with a stock storefront with the seeded data in a Vendure instance.

It can happen that the Server is unreachable for whatever reason and that seems to not be handled at the moment. For example if you dont start the Vendure server you get greeted by this beautiful lil guy:

Probably relevant Remix docs v1 and v2

How about a simple page saying something like "Oops something went wrong. Please try again soon." with a small image.

Heres how Google does it, short and sweet:

Is there a clever way to "lock" the site so that only logged in users can see anything besides the sign-in page? I've been adding this in all the loaders of each route, but not sure if there's a cleaner/ more robust way?

const { activeCustomer } = await getActiveCustomerDetails({ request });
  if (!activeCustomer) {
    return redirect('/sign-in');
  }

It seems sessionStorage has been replaced by getSessionStorage() in 106c0e2 but its import here is missing now: