support ESM module

[himself65]

Server Error
Error: require() of ES Module /Users/himself65/Code/textea-sheet/node_modules/react-dnd/dist/index.js from /Users/himself65/Code/textea-sheet/node_modules/react-dnd-preview/dist/cjs/usePreview.js not supported.
Instead change the require of index.js in /Users/himself65/Code/textea-sheet/node_modules/react-dnd-preview/dist/cjs/usePreview.js to a dynamic import() which is available in all CommonJS modules.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
.../node_modules/react-dnd-preview/dist/cjs/usePreview.js (8:17)
Object.<anonymous>
.../node_modules/react-dnd-preview/dist/cjs/Preview.js (12:20)
Object.<anonymous>
.../node_modules/react-dnd-preview/dist/cjs/index.js (26:16)
Object.<anonymous>
.../node_modules/react-mosaic-component/node_modules/react-dnd-multi-backend/dist/cjs/components/Preview.js (20:48)
Object.<anonymous>
.../node_modules/react-mosaic-component/node_modules/react-dnd-multi-backend/dist/cjs/index.js (56:16)
Object.<anonymous>
...node_modules/react-mosaic-component/lib/Mosaic.js (39:49)
Object.<anonymous>
.../node_modules/react-mosaic-component/lib/index.js (20:16)
react-mosaic-component
.../app/.next/server/pages/sheet/[id].js (1330:18)
__webpack_require__
.../app/.next/server/webpack-runtime.js (33:42)
__webpack_require__.t
.../app/.next/server/webpack-runtime.js (139:38)

[Lonli-Lokli]

I've created PR to address this

[Lonli-Lokli]

I am not sure if this package is supported, so I published my fork with these changes
npm i react-mosaic-component2@6.4.0

[sgtsquiggs]

can we get this merged in? we're using nx patch locally to get this working.

[MrSimmmons]

@nomcopter This is becoming a bigger and bigger issue as time goes on as a large chunk, if not most of industry has moved over to ESM. It would be great if you could check out either of the two PR proposals.

As a side note @Lonli-Lokli , Ive tried using your published fork and cant seem to get it working

[Lonli-Lokli]

@MrSimmmons you should remove /lib from import path

[MrSimmmons]

@Lonli-Lokli That also fails and says that Mosaic cant be found.

[Lonli-Lokli]

@MrSimmmons are you using webpack? If so, which version?

I think you are using legacy Webpack4, which does not support exports field

[MrSimmmons]

@Lonli-Lokli Im using nextjs 14 which uses webpack 5

[MrSimmmons]

@Lonli-Lokli Couldn't figure it out, did a computer restart and now its working.
The VSCode intenseness still tries to add the /lib to the import. So I'm pretty sure something isn't set up properly there.

[Lonli-Lokli]

Yep, I will take a look next week when return home.

I had just browser project, didn't test with Node.

[Lonli-Lokli]

@MrSimmmons Can you try npm i react-mosaic-component2@6.13.0 ?

[MrSimmmons]

Am away atm, will try it out when I get back around the 14th.
Thanks for looking into this though!

[nomcopter]

Thanks for the work here all - I should have time to dive into this over the next couple weeks. My biggest priority finding a way to make it the least breaking for existing CJS users as possible and so need to get the right test repos up and running. Will check out the PRs and forks as well!

[himself65]

some update for myself, im using https://github.com/bvaughn/react-resizable-panels right now. even though it's more low level api but it's well maintained

[nomcopter]

Still on my list, but will likely be a few more weeks before I can get to this, thanks for your patience or I hope another lib works for you!