[react-sharedb] - Why react-sharedb is throwing error when we use in some ts(TypeScript) file. Is it not supported?

[saukumar95]

For any JS or JSX file I have used it is working fine but I am not able to understand such behavior in below scenario :

JS <- react-sharedb -> working fine.
JS <- JS <- react-sharedb -> working fine.
JSX <- JSX/JS <- react-sharedb works fine.
JS <- TS <- react-sharedb -> Not working

Issue is when I create one helper JS file which contains react-sharedb import and then I import that helper file in TS file.
Webpack compiler then tries to compile but later it throws below error:

Error [ERR_REQUIRE_ESM] [ERR_REQUIRE_ESM]: Must use import to load ES Module:

Node Version : 14.16.1
Webpack Version: 5.36.2
React version: 17.0.1
@startupjs/react-sharedb version: 0.29.4

[saukumar95]

Similar issue is created for next.js.
Here is the link.

[cray0000]

Hi @saukumar95, sorry for the late response,

0.29.4 is a pretty old version which might not have an actual TS support tested yet at that point.

We did update TS support in the recent versions of startupjs (and react-sharedb), there was also a problem with react-sharedb types which should now be fixed (at least for the react-sharedb Hooks API).

Can you try generating a new startupjs project and see if you still have this issue. If you don't then I would just recommend to try to update your project to use the latest version of react-sharedb.

Otherwise, if you would still see the issue on a freshly generated project then it would help a lot if you can publish the repo to github with this issue replicated and we'll prioritise fixing it.

[cray0000]

@saukumar95 we are also using Webpack 5 in the latest versions of startupjs and the latest versions of @startupjs/react-sharedb seem to be working fine with it in TS files. I'm not sure it works correctly on Webpack 4 though since we had to do some changes to our module imports/exports when transitioning to Webpack 5 and when we were adding support for web-only mode in one of the latest versions.

[cray0000]

And I'm also not sure with the opposite scenario -- the older versions of startupjs (including react-sharedb) were made for and tested on Webpack 4 and might not work on Webpack 5 at all correctly without tweaks.

[saukumar95]

Hi @saukumar95, sorry for the late response,

0.29.4 is a pretty old version which might not have an actual TS support tested yet at that point.

We did update TS support in the recent versions of startupjs (and react-sharedb), there was also a problem with react-sharedb types which should now be fixed (at least for the react-sharedb Hooks API).

Can you try generating a new startupjs project and see if you still have this issue. If you don't then I would just recommend to try to update your project to use the latest version of react-sharedb.

Otherwise, if you would still see the issue on a freshly generated project then it would help a lot if you can publish the repo to github with this issue replicated and we'll prioritise fixing it.

Thanks! for the update @cray0000. Let me check after upgrade. I hope this will work. As I would love to publish the repo and get help but unfortunately that private repo and not open source project. So that's not in my control. 😁😉. But thanks for your support.

[saukumar95]

@cray0000 i tried upgrading and i noticed there is no issue with startupjs. It's actually the webpack configuration causing issue which need to be fixed. Thanks for helping.