Sortable: Unable to support server-side rendering

[Xzillion]

Problem:

Unable to support server-side rendering

Version

1.10.0

Environment

chrome 76, nodejs v8.11.3

Reproduction link

https://codesandbox.io/embed/example-hello-world-802gp

Steps to reproduce

import sortablejs in server side rendering project

What is expected?

show server side rendering page

What is actually happening?

ReferenceError:
navigator is not defined

[Xzillion]

I think the reason is:
source code : https://github.com/SortableJS/Sortable/blob/master/src/BrowserInfo.js
Did not check browser environment，for example: document or window variable

[ndragun92]

Any current stable version which isn't throwing
navigator is not defined ?

[Xzillion]

Any current stable version which isn't throwing
navigator is not defined ?

Higher than 1.8.4 version can not work in server-side rendering

[MarcelloTheArcane]

Pin sortablejs to 1.8.3 and add this to your package.json to make sure any subdependencies get added. I'm using vuedraggable, so need to make sure all versions of sortablejs are pinned.

{
  "resolutions": {
    "sortablejs": "1.8.3"
  }
}

[Xzillion]

@MarcelloTheArcane yes, I am using vuedraggable also，and I have submitted a issue to the vuedraggable team

[Xzillion]

@MarcelloTheArcane I think this problem needs to be solved by the vuedraggable team.

[owen-m1]

Are you instantiating Sortable on the server?
Even 1.8.3 is checking the navigator object when you import it: https://github.com/SortableJS/Sortable/blob/1.8.3/Sortable.js#L95

[MarcelloTheArcane]

I don't think it gets round to checking: https://github.com/SortableJS/Sortable/blob/1.8.3/Sortable.js#L24

[Xzillion]

@owen-m1 but 1.10.0 is not checking the navigator object when you import it:
https://github.com/SortableJS/Sortable/blob/master/src/BrowserInfo.js#L2
When you import BrowserInfo.js, the server will throw:
navigator is not defined

[owen-m1]

Ok. I will fix soon.

[owen-m1]

@Xzillion Do you know if this issue would occur if I used window.navigator.userAgent as opposed to just navigator.userAgent here?

I am trying to figure out what I should do here because it seems that the only reason it would have worked before in 1.9.0 is because Sortable would have thrown an error when the window object is not defined.

[owen-m1]

This was solved in 1.10.1