This seems to have been resolved since then since I have now been able to upgrade to React 19 and the widget now properly renders in the ticket_sidebar.
However, with one of our widgets we utilize the showModal method (client.interface.trigger(‘showModal’, …) and it seems like the same problem exists here when trying to render the widget in the modal.
The appclient script gets attached to the DOM and loads, but when calling window.app.initialized() nothing happens, it doesn’t resolve and it doesn’t throw, it just stops executing. I have been able to confirm this by logging the steps to the console and I can see that execution just stops.
Going back to React 18 and using the deprecated ReactDOM.render() resolves the issue, but I would like to upgrade to React 19 and this bug is actively blocking me.
we are working on introducing the upgraded react features in FDK, which will solve most of your cases, We will keep you posted, kindly stay tuned for the updates.
Thanks for the quick reply and the information, great to hear that you are working on it. Will hold off on the React upgrade for now then and get back to it at a later time.
Thank you for the update. I tried upgrading in my dev-environment but unfortunately I am still seeing the same behaviour.
I have upgraded to FDK 10.1.0 and upgraded my project to React 19 as well as migrated to using createRoot() instead of ReactDOM.render().
This is the part of my App.js-file that is relevant:
useLayoutEffect(() => {
// To support StrictMode, if the script-element has already been mounted to the DOM, don't do it again.
if (fwScriptElement.current !== null) return;
const script = document.createElement('script');
script.src = '{{{appclient}}}';
script.defer = true;
script.addEventListener('load', () => {
console.log('Nestor DEV app-client script load event fired.');
setLoaded(true);
});
document.head.appendChild(script);
fwScriptElement.current = script;
}, []);
useLayoutEffect(() => {
if (!loaded) return;
console.log('Nestor DEV starting app initalization...');
window.app.initialized().then((client) => {
console.log('Nestor DEV app initialized!', client);
getWidgetStartupMode(client).then((startupMode) => {
if (!startupMode || !startupMode.module) {
setChild((
<FwInlineMessage open type='error'>
Configuration error!
</FwInlineMessage>
));
}
console.log('Nestor DEV app set to mode:', startupMode);
setWidgetStartupMode(startupMode);
setFwClient(client);
});
}).catch((err) => {
console.error('Nestor DEV initialization error:', err);
});
return () => {
setFwClient(null);
setWidgetStartupMode(null);
};
}, [loaded]);
When I open the custom app in the sidebar everything works as expected and I can see the following in the console:
In other words, the script loads, the app initializes, I get my client and then it goes on loading the app.
But when I open the custom app in the modal, I only get this in the console:
So the loading of the script works fine, it enters the second useLayoutEffect() but when it is supposed to either go into the then() or catch()-blocks, execution stops and nothing more is logged. The app is then stuck in the loading state.
I am not using the new React template, I created a test-app now based on the new template and I can see that the structure is very different.
I am going to have to test migrating one of our apps to the new template, but unfortunately I do not have time for that at the moment. I will try to remember to update here again with my results when I get there.
