@graphcommerce/ecommerce-ui 9.1.0-canary.55 → 10.0.0-canary.56

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @graphcommerce/ecommerce-ui
 
+## 10.0.0-canary.56
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.55
 
 ## 9.1.0-canary.54

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -7,7 +7,7 @@ import { maskNetworkError } from './maskNetworkError'
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
 export type ApolloErrorAlertProps = {
-  error?: ApolloError
+  error?: ApolloError | null
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
   sx?: SxProps<Theme>

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -1,7 +1,7 @@
 import type { ApolloError } from '@graphcommerce/graphql'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
 import { FullPageMessage } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
 import { maskNetworkError } from './maskNetworkError'
@@ -37,7 +37,7 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
   }
 
   return (
-    <FullPageMessage title={<Trans id='Several errors occured' />} {...fullPageMessageProps}>
+    <FullPageMessage title={<Trans>Several errors occured</Trans>} {...fullPageMessageProps}>
       <ApolloErrorAlert error={error} />
     </FullPageMessage>
   )

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -4,7 +4,7 @@ import { ErrorSnackbar } from '@graphcommerce/next-ui'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
-  error?: ApolloError
+  error?: ApolloError | null
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {

package/components/ApolloError/maskNetworkError.tsx

@@ -1,5 +1,5 @@
 import type { ServerError, ServerParseError } from '@graphcommerce/graphql'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 
 function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {
   return 'name' in (error as ServerError)
@@ -19,12 +19,12 @@ export function maskNetworkError(networkError: Error | ServerParseError | Server
   }
 
   if (isServerParseError(networkError) || isServerError(networkError)) {
-    return <Trans id='Something went wrong on the server, please try again later.' />
+    return <Trans>Something went wrong on the server, please try again later.</Trans>
   }
 
   if (globalThis.navigator && !globalThis.navigator?.onLine) {
-    return <Trans id='It appears you are offline, please try again later.' />
+    return <Trans>It appears you are offline, please try again later.</Trans>
   }
 
-  return <Trans id='Something went wrong' />
+  return <Trans>Something went wrong</Trans>
 }

package/components/FormComponents/ActionCardListForm.tsx

@@ -79,7 +79,7 @@ export function ActionCardListForm<
       {...other}
       multiple={multiple}
       required={required}
-      value={value}
+      value={value ?? null}
       ref={ref}
       onChange={(_, incoming) => onChange(incoming)}
       error={formState.isSubmitted && !!fieldState.error}

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,6 +1,6 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { CheckboxProps } from '@mui/material'
 import {
   Checkbox,
@@ -61,7 +61,7 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
     fieldState: { invalid, error },
   } = useController({
     name,
-    rules: required ? { required: i18n._(/* i18n */ 'This field is required') } : undefined,
+    rules: required ? { required: t`This field is required` } : undefined,
     control,
     defaultValue,
     shouldUnregister,

package/components/FormComponents/CheckboxElement.tsx

@@ -1,6 +1,6 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type {
   CheckboxProps,
   FormControlLabelProps,
@@ -32,7 +32,7 @@ type CheckboxElementComponent = <TFieldValues extends FieldValues>(
   props: CheckboxElementProps<TFieldValues>,
 ) => React.ReactNode
 
-function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
+function CheckboxElementBase(props: CheckboxElementProps): React.ReactNode {
   const {
     name,
     rules = {},
@@ -48,7 +48,7 @@ function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
   } = props
 
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   const {

package/components/FormComponents/EmailElement.tsx

@@ -1,7 +1,7 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { emailPattern } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type { TextFieldElementProps } from './TextFieldElement'
 import { TextFieldElement } from './TextFieldElement'
 
@@ -10,17 +10,17 @@ export type EmailElementProps<T extends FieldValues> = TextFieldElementProps<T>
 /** @public */
 export function EmailElement<TFieldValues extends FieldValues>(
   props: EmailElementProps<TFieldValues>,
-): JSX.Element {
+): React.ReactNode {
   const { rules, ...rest } = props
   return (
     <TextFieldElement
       type='email'
-      label={<Trans id='Email address' />}
+      label={<Trans>Email address</Trans>}
       autoComplete='email'
       rules={{
         pattern: {
           value: emailPattern,
-          message: i18n._(/* i18n */ 'Please enter a valid email address'),
+          message: t`Please enter a valid email address`,
         },
         ...rules,
       }}

package/components/FormComponents/InputBaseElement.tsx

@@ -1,6 +1,6 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { InputBaseProps } from '@mui/material'
 import { InputBase, useForkRef } from '@mui/material'
 import React from 'react'
@@ -15,7 +15,7 @@ type InputBaseElementComponent = <TFieldValues extends FieldValues>(
 
 function InputBaseElementBase(
   props: InputBaseElementProps & { ref?: React.Ref<HTMLInputElement> },
-): JSX.Element {
+): React.ReactElement {
   const {
     type,
     required,
@@ -31,7 +31,7 @@ function InputBaseElementBase(
   } = props
 
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   const {

package/components/FormComponents/MultiSelectElement.tsx

@@ -2,7 +2,7 @@
 import { iconClose, IconSvg } from '@graphcommerce/next-ui'
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { FormControlProps, SelectProps } from '@mui/material'
 import {
   Checkbox,
@@ -38,7 +38,7 @@ const ITEM_PADDING_TOP = 8
 /** @public */
 export function MultiSelectElement<TFieldValues extends FieldValues>(
   props: MultiSelectElementProps<TFieldValues>,
-): JSX.Element {
+): React.ReactNode {
   const {
     options,
     label = '',
@@ -61,7 +61,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
     ...rest
   } = props
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   const {

package/components/FormComponents/NumberFieldElement.tsx

@@ -7,7 +7,7 @@ import {
 } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import { Fab, TextField, useForkRef } from '@mui/material'
 import React from 'react'
@@ -70,7 +70,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
   }
 
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   const {
@@ -134,7 +134,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
         ...InputPropsFiltered,
         startAdornment: (
           <Fab
-            aria-label={i18n._(/* i18n */ 'Decrease')}
+            aria-label={t`Decrease`}
             size='smaller'
             onClick={() => {
               if (
@@ -160,7 +160,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
         ),
         endAdornment: (
           <Fab
-            aria-label={i18n._(/* i18n */ 'Increase')}
+            aria-label={t`Increase`}
             size='smaller'
             onClick={() => {
               if (valueAsNumber >= (inputProps.max ?? Infinity)) return
@@ -182,7 +182,7 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
         ),
       }}
       inputProps={{
-        'aria-label': i18n._(/* i18n */ 'Number'),
+        'aria-label': t`Number`,
         ...inputProps,
         className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
         sx: {

package/components/FormComponents/PasswordElement.tsx

@@ -14,7 +14,7 @@ export type PasswordElementProps<T extends FieldValues> = TextFieldElementProps<
 /** @public */
 export function PasswordElement<TFieldValues extends FieldValues>(
   props: PasswordElementProps<TFieldValues>,
-): JSX.Element {
+): React.ReactNode {
   const { iconColor, ...textFieldProps } = props
   const [password, setPassword] = useState<boolean>(true)
   return (

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -1,6 +1,6 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useWatch } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { PasswordElementProps } from './PasswordElement'
 import { PasswordElement } from './PasswordElement'
 
@@ -18,8 +18,7 @@ export function PasswordRepeatElement<TFieldValues extends FieldValues>({
     <PasswordElement
       {...rest}
       rules={{
-        validate: (value: string) =>
-          value === pwValue || i18n._(/* i18n */ "Passwords don't match"),
+        validate: (value: string) => value === pwValue || t`Passwords don't match`,
       }}
     />
   )

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import {
   FormControl,
   FormControlLabel,
@@ -37,7 +37,7 @@ type RadioButtonGroupComponent = <TFieldValues extends FieldValues>(
   props: RadioButtonGroupProps<TFieldValues>,
 ) => React.ReactNode
 
-function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
+function RadioButtonGroupBase(props: RadioButtonGroupProps): React.ReactNode {
   const {
     helperText,
     options,
@@ -61,7 +61,7 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
     fieldState: { invalid, error },
   } = useController({
     name,
-    rules: required ? { required: i18n._(/* i18n */ 'This field is required') } : undefined,
+    rules: required ? { required: t`This field is required` } : undefined,
     control,
     defaultValue,
     shouldUnregister,

package/components/FormComponents/SelectElement.tsx

@@ -17,7 +17,7 @@ type SelectElementComponent = <TFieldValues extends FieldValues>(
 ) => React.ReactNode
 
 /** @public */
-function SelectElementBase(props: SelectElementProps): JSX.Element {
+function SelectElementBase(props: SelectElementProps): React.ReactNode {
   const { options } = props as AdditionalProps
   const { SelectProps } = props as TextFieldProps
 

package/components/FormComponents/SliderElement.tsx

@@ -1,6 +1,6 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { FormControlProps, SliderProps } from '@mui/material'
 import { FormControl, FormHelperText, FormLabel, Slider } from '@mui/material'
 import React from 'react'
@@ -22,7 +22,7 @@ type SliderElementComponent = <TFieldValues extends FieldValues>(
   props: SliderElementProps<TFieldValues>,
 ) => React.ReactNode
 
-function SliderElementBase(props: SliderElementProps): JSX.Element {
+function SliderElementBase(props: SliderElementProps): React.ReactNode {
   const {
     name,
     control,
@@ -37,7 +37,7 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
   } = props
 
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   const {

package/components/FormComponents/SwitchElement.tsx

@@ -17,7 +17,7 @@ type SwitchElementComponent = <TFieldValues extends FieldValues>(
   props: SwitchElementProps<TFieldValues>,
 ) => React.ReactNode
 
-function SwitchElementBase(props: SwitchElementProps): JSX.Element {
+function SwitchElementBase(props: SwitchElementProps): React.ReactNode {
   const { name, control, defaultValue, shouldUnregister, rules, disabled, ...other } = props
 
   const { field } = useController({

package/components/FormComponents/TelephoneElement.tsx

@@ -1,6 +1,7 @@
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { phonePattern } from '@graphcommerce/react-hook-form'
-import { t, Trans } from '@lingui/macro'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type { TextFieldElementProps } from './TextFieldElement'
 import { TextFieldElement } from './TextFieldElement'
 
@@ -9,7 +10,7 @@ export type TelephoneElementProps<T extends FieldValues> = TextFieldElementProps
 /** @public */
 export function TelephoneElement<TFieldValues extends FieldValues>(
   props: TelephoneElementProps<TFieldValues>,
-): JSX.Element {
+): React.ReactNode {
   const { rules, ...rest } = props
   return (
     <TextFieldElement

package/components/FormComponents/TextFieldElement.tsx

@@ -2,7 +2,7 @@
 import { InputCheckmark } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { emailPattern, useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { TextFieldProps } from '@mui/material'
 import { TextField, useForkRef } from '@mui/material'
 import React, { useState } from 'react'
@@ -46,7 +46,7 @@ function toValue(incomingValue: unknown, type: React.HTMLInputTypeAttribute) {
 }
 
 /** @public */
-function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
+function TextFieldElementBase(props: TextFieldElementProps): React.ReactNode {
   const {
     name,
     control,
@@ -61,13 +61,13 @@ function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
   } = props as TextFieldProps & InternalProps & BaseControllerProps
 
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   if (type === 'email' && !rules.pattern) {
     rules.pattern = {
       value: emailPattern,
-      message: i18n._(/* i18n */ 'Please enter a valid email address'),
+      message: t`Please enter a valid email address`,
     }
   }
 

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,6 +1,6 @@
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { FormLabelProps, ToggleButtonGroupProps, ToggleButtonProps } from '@mui/material'
 import {
   FormControl,
@@ -39,7 +39,7 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
   ...toggleButtonGroupProps
 }: ToggleButtonGroupElementProps<TFieldValues>) {
   if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
+    rules.required = t`This field is required`
   }
 
   const isRequired = required || !!rules?.required

package/components/PreviewMode/PreviewModeDisabled.tsx

@@ -1,3 +1,4 @@
+import { previewSecret } from '@graphcommerce/next-config/config'
 import { iconChevronRight, iconContrast, IconSvg, MessageSnackbar } from '@graphcommerce/next-ui'
 import { FormPersist, FormProvider, useForm } from '@graphcommerce/react-hook-form'
 import { Box, IconButton } from '@mui/material'
@@ -10,8 +11,7 @@ function getPreviewUrl() {
   return url
 }
 
-const secret =
-  process.env.NODE_ENV === 'development' ? (import.meta.graphCommerce.previewSecret ?? '') : ''
+const secret = process.env.NODE_ENV === 'development' ? (previewSecret ?? '') : ''
 
 type FormValues = { secret: string }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.56",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,24 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/graphql": "^9.1.0-canary.55",
-    "@graphcommerce/next-ui": "^9.1.0-canary.55",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/react-hook-form": "^9.1.0-canary.55",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
-    "@lingui/core": "^4.2.1",
-    "@lingui/macro": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/graphql": "^10.0.0-canary.56",
+    "@graphcommerce/next-ui": "^10.0.0-canary.56",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.56",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.56",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.56",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "next": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./route/preview": "./route/preview.ts",
+    "./plugins/PreviewModeFramerNextPages": "./plugins/PreviewModeFramerNextPages.tsx"
   }
 }

package/route/preview.ts

@@ -1,4 +1,5 @@
 import type { PreviewData } from '@graphcommerce/graphql'
+import { previewSecret } from '@graphcommerce/next-config/config'
 import type { NextApiRequest, NextApiResponse } from 'next'
 import { previewModeDefaults } from '../components/PreviewMode/previewModeDefaults'
 
@@ -18,7 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
 
   if (action === 'enable' && req.query.secret) {
-    if (req.query.secret !== import.meta.graphCommerce.previewSecret) {
+    if (req.query.secret !== previewSecret) {
       // This secret should only be known to this API route and the CMS
       res.status(401).json({ message: 'Invalid token' })
       res.end()