vendure-ecommerce / storefront-remix-starter Goto Github PK
View Code? Open in Web Editor NEWA storefront starter kit for Vendure built with Remix
Home Page: https://remix-storefront.vendure.io
A storefront starter kit for Vendure built with Remix
Home Page: https://remix-storefront.vendure.io
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
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)
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:
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:
storefront-remix-starter/app/root.tsx
Line 57 in e32cebd
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
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,
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:
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.
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
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;
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.
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
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;
};
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.
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.
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
Improve checkout form client/server side validation
Improve checkout form client/server side error handling.
Support default configurable guest checkout strategies
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:
This task would involve:
gql
template function with a graphql
function call.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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.