Skip to main content
Version: next

3.8 -> 3.9

This page lists the highlights for upgrading a project from Front-Commerce 3.8 to 3.9

Update dependencies​

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

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

Automated Migration​

In this version, there are no automated migrations. However, if you're upgrading from version 3.8.0, you must run the 3.8.1 codemod as part of your migration to 3.9.x. This codemod will help ensure your codebase is compatible with version 3.9.x.

To run the codemod, execute the following command:

pnpm run front-commerce migrate --transform 3.8.1

Manual Migration​

Layer facets​

In this release, we reworked the LayoutFacets.tsx component to support rendering any types of dynamic facets returned by GraphQL. It leverages the new ExtensionComponentMap.

If you have overriden theme/modules/Layer/LayerFacets/LayerFacets, you will need to apply the changes from its latest version to also support this feature. See related commit.

In this release, we've added support for Google's Consent Mode v2 which provides more granular control over user consent preferences. This change affects applications using either the Google Analytics 4 or Google Tag Manager plugins.

To enable this feature, add the consentOptions to your service configuration in cookiesServices.js

tip

You can also take advantage of the consentOptions in your custom plugins by following the Granular Consent Updates guide.

If you have overriden any of these files, please make sure you apply the changes to your overrides:

Root Error Boundary​

info

If you have already applied this update in 3.8, you can skip this section. This was not documented in the previous release.

We have introduced a new RootErrorBoundary component to handle route errors in Remix. Please ensure that you update your projects root.tsx file to export this new component in the ErrorBoundary export.

app/root.tsx
import { RootErrorBoundary } from "theme/pages/Error";

//...

export function ErrorBoundary() {
  //...
}
export const ErrorBoundary = RootErrorBoundary;

To learn more about route error customizations, please refer to the Error Handling for routes guide.