9.x → 10.x

This guide describes the breaking changes required when upgrading from the 9.x to the 10.x release of enosix Cloud UI (@enosix/cloud-ui).

What Changed

In 9.x, notistack was bundled inside the published @enosix/cloud-ui package. In 10.x, notistack is a peer dependency and is no longer bundled.

This fixes an issue in custom apps that render their own SnackbarProvider. Because the app and @enosix/cloud-ui each had their own copy of notistack, they used different React contexts. Calls to showToast from useToastMessages ran without error, but no toast was displayed. With a single shared notistack instance, toasts now render through the provider that wraps your app.

Who Is Affected

App type	Action required
Custom apps (custom-ui)	Add notistack to your app's dependencies.
Apps based on the vc-ui or salesdoc-ui templates	Add notistack to your app's dependencies.
Apps created with the latest CLI template	None. New projects already include notistack.
Built-in Variant Configuration and Sales Document UI apps	None. Notifications continue to work as before.

The Variant Configuration UI embed configuration and initial context payloads are not impacted by this release.

Required Changes

1. Add notistack as a dependency

Add notistack to your app's package.json dependencies:

  "dependencies": {
    "@enosix/cloud-ui": "^10.0.0",
+   "notistack": "^3.0.2",
    "react": "^19.2.8"
  }

Or install it with your package manager:

pnpm install notistack

Package managers that auto-install peer dependencies (pnpm and npm 7+ by default) may resolve notistack for you. Declare it explicitly anyway, so your app controls the single shared version. This is required if your code imports notistack directly, for example to render a SnackbarProvider.

2. Make sure a single SnackbarProvider wraps your app

Your app must render a SnackbarProvider imported from your own notistack install, above any component that calls useToastMessages:

import { SnackbarProvider } from 'notistack'

createRoot(document.getElementById('root')!).render(
    <SnackbarProvider>
        <App />
    </SnackbarProvider>,
)

If your app already wraps its root with SnackbarProvider, no code change is needed beyond installing the dependency.

3. Verify only one copy of notistack is installed

Ensure your lockfile resolves a single version of notistack shared by your app and @enosix/cloud-ui:

pnpm why notistack

If more than one version is listed, align the version range in your app's package.json with the one required by @enosix/cloud-ui (^3.0.2), then reinstall.

Verifying the Upgrade

1. Start your app and trigger a toast, for example showToast('success', 'Test message') from useToastMessages.
2. Confirm that the toast is displayed.
3. In the browser developer tools, confirm that a .notistack-SnackbarContainer element is present in the DOM.

Troubleshooting

Symptom	Likely cause	Fix
showToast runs without error but no toast appears	No SnackbarProvider wraps the app, or the app and @enosix/cloud-ui resolve different copies of notistack	Follow steps 1–3 above.
Build or install error: Cannot find module 'notistack'	notistack is not installed in your app	Run pnpm install notistack.
Peer dependency warning for notistack	notistack is not declared in your app's dependencies	Add it as described in step 1.