Sortable: SSR problem in vue.draggable context
Problem:
Hello @owen-m1 , version 1.1.0.0 of sortable.js introduced a call to navigator global property.
This is breaking SSR usage of vue.draggable: building the template on the server-side using node (none browser context).
I tried a fix to require sortable.js only in browser context (https://github.com/SortableJS/Vue.Draggable/issues/724), but it seems
- not to cover all scenarios (see discusrion on https://github.com/SortableJS/Vue.Draggable/issues/724)
- to introduce regressions (https://github.com/SortableJS/Vue.Draggable/issues/731, https://github.com/SortableJS/Vue.Draggable/issues/730, https://github.com/SortableJS/Vue.Draggable/issues/728)
I can not think of another fix on vue.draggable side thougth. Could it be possible to check for navigator early in sortable.js to avoid to raise exception when navigator is not defined?
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 29 (17 by maintainers)
Commits related to this issue
- #1646: Fix SSR rendering — committed to SortableJS/Sortable by owen-m1 5 years ago
- #1646: Fix SSR rendering — committed to elo7/Sortable by owen-m1 5 years ago
- #1646: Fix SSR rendering — committed to Tupperbox/Sortable by owen-m1 5 years ago
@UnaiRA I will release 1.10.1 tonight.
@UnaiRA @stuta Please try building commit 576e33540c545dcefe0d805754ac2f454b55538f and tell me if it fixes the problem. I just made it so that Sortable will not throw any errors on import if the window or document is not defined. Obviously it won’t work properly unless it is imported in a browser context, but this has always been the behaviour of Sortable.
Hi Owen, I’ve tested the fix, and it doesn’t work for me. The problem is that there is quite a few browser specific code executed as soon as someone import/require this library.
I’m using Vue.Draggable that require Sortable. The import is made on serverside and on clientside. But the Sortable constructor is only called in
mountedfunction, which is only executed on the client. I tried to move all the browser specific code in the constructor instead of the root of the module and it works.I’ve a commit with the changes https://github.com/Tarrask/Sortable/commit/8ff64de40ca8ef28e30b3559d7463ec2e40c1f2e that works in my case. It’s a bit to early to submit a merge request as I don’t know yet if it break anything else. For exemple, if you call the constructor more than one time, it will register some listeners twice.
Version 2.23.2 released! Thanks @owen-m1 and @Tarrask
@David-Desmaisons @serdarkok @UnaiRA @Tarrask 1.10.1 is released
@owen-m1 to clarify: sortable by itself did not support SSR but vue.draggable do.
Mainly vue.draggable is avoiding to run any sortable code in a node context. The problem in version 1.10.0 is that the simple fact of importing Sortable in a node context will throw an exception.
@Tarrask Thank you, I see the issue now. Sortable never supported SSR, but if you imported Sortable without a window object, it would only throw an error when you called the Sortable constructor.
@owen-m1 I will perform some manual test with the fixed version locally. If everything runs OK, I will let you know.