Skip to main content
Version: 3.x

3.4 -> 3.5

This page lists the highlights for upgrading a project from Front-Commerce 3.4 to 3.5

Update dependencies

Update all your @front-commerce/* dependencies to this version:

pnpm update "@front-commerce/*@3.5.0"

Automated Migration

We provide a codemod to automatically update your codebase to the latest version of Front-Commerce. This tool will update your code when possible and flag the places where you need to manually update your code (with // TODO Codemod comments).

pnpm run front-commerce migrate --transform 3.5.0

Quick order page feature

The quick order page is active by default at /quick-order.
We recommend you to test this feature and adapt it to your needs if necessary.

If you want to opt-out of this feature, you will have to remove the route from the application, via the vite.config.ts::frontCommerce plugin's options.

Configuration updates

In this new release, we've introduced some changes on how some configurations are set.


We've introduced a new cache configuration in the config object resolved from FrontCommerceApp.

These are now defined with a config provider; it allows you to change the behaviour of the configuration computing.

Config pathEnv Variable

Magento 1/2

We have updated the way we use the Magento 1/2 configuration. It's now possible to access Magento OAuth configuration with:

Config pathEnv Variable

Image Resizer

Display of dev error message is now handled with a configProvider:

Config pathEnv Variable

Deprecation of env vars

These env vars support have been removed from the core code in favor of configurations:


To configure these, you now should use new configuration in front-commerce.config.ts:

import { defineConfig } from "@front-commerce/core/config";

export default defineConfig({
maintenance: {
) ?? [],
contributionMode: {
force: process.env.FRONT_COMMERCE_CONTRIBUTION_MODE_FORCE === "true",


The createResizedImageResponse function now requires an additional parameter called options. At the time of writing this documentation, the options parameter only contains one entry to enable or disable error messages in dev mode.

You can check the signature of this new parameter in the resizedImageConfigProvider method.

Deprecation of createSeoHandle

We have deprecated the createSeoHandle in favor of the createHandle which combines different handle export features.

import { createSeoHandle } from "@front-commerce/remix/seo";
import { createHandle } from "@front-commerce/remix/handle";

export const handle = createSeoHandle(...);
export const handle = createHandle(...);

Replace useLoaderData with useDynamicRouteLoaderData

If you have overwritten any of these routes

  • app/routes/product.$id.tsx
  • app/routes/category.$id.tsx
  • app/routes/cms.$id.tsx

You must replace the useLoaderData hook with the useDynamicRouteLoaderData

Code changes

Remix entrypoints

In this release, we improved features that required to hook into your Remix application files created with the initial skeleton. You must update these files in your application, as detailed below or copy the ones from the latest skeleton.

app/root.tsx file
diff --git a/app/root.tsx b/app/root.tsx
index 0c65e479a..0a4c2411d 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -49,10 +49,7 @@ export const meta: MetaFunction = (args) => {
return metas(args);

-export default function App() {
- const navigation = useNavigation();
- usePageProgress(navigation.state !== "idle");
+export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
@@ -62,7 +59,8 @@ export default function App() {
<Links />
- <Outlet />
+ {/* children will be the root Component, ErrorBoundary, or HydrateFallback */}
+ {children}
<ScrollRestoration />
<Scripts />
<FrontCommerceScripts />
@@ -71,6 +69,12 @@ export default function App() {
+export default function App() {
+ const navigation = useNavigation();
+ usePageProgress(navigation.state !== "idle");
+ return <Outlet />;

export function ErrorBoundary() {
const error = useRouteError();

app/entry.client.tsx file
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
index 341faa525..c70cdd2d7 100644
--- a/app/entry.client.tsx
+++ b/app/entry.client.tsx
@@ -6,7 +6,10 @@
import { RemixBrowser } from "@remix-run/react";
import { StrictMode, startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
-import { FrontCommerceBrowser } from "@front-commerce/remix/react";
+import {
+ FrontCommerceBrowser,
+ prepareHydration,
+} from "@front-commerce/remix/react";
import { CompatProviderBrowser } from "@front-commerce/compat/CompatProvider";
import manifest from "virtual:front-commerce/manifest";

@@ -29,5 +32,5 @@ const hydrate = async () => {

startTransition(() => {
- hydrate();
+ prepareHydration(hydrate);