Server Error Error: No matching bindings found for serviceIdentifier: Symbol(CmsEventBusService)

[joej0e]

I believe the issue is related to the optional binding for CmsEventBusService (bind(CmsEventBusService).toDynamicValue(() => new Typed()).inSingletonScope().when(() => typeof window !== "undefined")). If that is the case, we won't be able to use initialize on the server side. Could you please take a look at it and provide an explanation?

[hachok]

Hey @joej0e!
You can call the initialize function from SPA SDK on the server side. Here is an example of using it inside getServerSideProps in the Next.js framework.
Could you please provide more information on how to reproduce the issue?

[jshahcodes]

@hachok How to go about it in angular 16?

[sforsberg]

@hachok Unfortunately, this is still an issue with the latest version the SDK, we are unable to render brXM content server-side in our mostly standard React applications. We are not using Next.js or any other similar framework.

We recently upgraded to the latest version from v17.x to resolve some security vulnerabilities stemming from that version of the SDK. In v17.x we had no server-side issues, however after the upgrade we now get the following error server-side:

Error: No matching bindings found for serviceIdentifier: Symbol(CmsEventBusService)
    at _validateActiveBindingCount (/Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:63:23)
    at _getActiveBindings (/Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:49:5)
    at _createSubRequests (/Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:92:26)
    at /Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:116:17
    at Array.forEach (<anonymous>)
    at /Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:115:26
    at Array.forEach (<anonymous>)
    at _createSubRequests (/Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:95:20)
    at Object.plan (/Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/planning/planner.js:137:9)
    at /Users/sforsberg/dev/mfe/homepage-mfe/node_modules/inversify/lib/container/container.js:333:37

Once the app hydrates client-side all is good, but we load the impacted pages initially in a bad state (blank sections or entire pages are blank).

The issue seems to occurs soon after initialize gets called successfully. I confirmed that the page data is received from the brXM API through logging, but as soon as React starts to render the page we quickly run into the above error.

One workaround I have been able to do to get a partial render of the page (at least to render components that are not brXM-derived) is to use the NBRMode option described here: https://github.com/bloomreach/spa-sdk/blob/main/packages/react-sdk/README.md#non-blocking-render-mode-nbrmode in addition to removing some of the logic to fetch brXM data server-side. This is less than ideal as a lot of our content is dynamic, leading to other issues with CLS and things of that nature.

I see there is also this recently opened and somewhat related issue: #38

Do you have any suggestions on how to resolve this issue?

Thanks!

[hachok]

Hi @sforsberg! Were you able to resolve the issue? I tried to reproduce it using React 18 and React SDK 24.0.0 but couldn't. Does the issue occur when you open your SPA in the preview?