REACTJS.NET SSR - Object doesn't support property or method 'forwardRef'

Question

I am trying to render my REACT components via SSR with REACTJS.NET in ASP.NET project.

In the JS file for SSR, I'm importing SimpleBar component from simplebar-react package. This is causing the error TypeError: Object doesn't support property or method 'forwardRef'.

I currently have 2 JS files, one for server and one for client. In the JS for server I am removing the adding of event listeners and similar. However, I can't get away from importing at least the npm package in both JS files.

Any idea on how I can avoid such error?

I am using Webpack + REACTJS.NET version 3.2.0.

Answer 1

So, after trying a lot of things, this is the best solution I came across. Before I begin, I am aware that conditional imports is being introduced in ECMA but it isn't working for me, or at least, they way I have the project setup.

Basically, my solution is resolved by mixing ES6 with CommonJS and with help of Webpack and babel.

In Webpack I am creating a plugin:

And in code, when I want to import the Simplebar react component, I do the following in the constructor:

And then, whenever I want to use my imported component, I do the following:

This was the best way I found in order to render with SSR. I think it's okay since the content between server and client side are the same.

Does anyone know a better solution? Or do you have concerns?