SSR issues with Handsontable

[jessapp]

Problem

I am importing Handsontable to my Remix application . When I create an instance of new Handsontable, I get SSR errors. See this repository for a reproduction (go to app/routes/table.tsx to see the Handsontable instance).

Solutions I have tried

As per this discussion thread, I tried renaming the impacted file from app/routes/table.tsx to app/routes/table.client.tsx to prevent the code from being used in the server, but the error persisted.

I also tried creating a ClientOnly component, as per this GitHub issue, but it also didn't solve the issue.

Is there any way to import Handsontable without triggering SSR issues? Or to disable SSR altogether? Thank you!

[sergiodxa]

I tried renaming the impacted file from app/routes/table.tsx to app/routes/table.client.tsx

You can't have .client files inside the routes folder, try re-exporting that Handsontable package from a .client file and then importing inside a route.

[jessapp]

Hey @sergiodxa, thanks for your reply!

Importing Handsontable from a .client file outside of the routes folder did indeed get me past the error I posted above, however the instance of Handsontable never rendered on the page.

When I combined your solution with the ClientOnly solution I mentioned in my initial question, I was able to get past the SSR error and render the Handsontable instance.

Thanks for your help!