Skip to content

Unable to support server-side rendering #1638

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Xzillion opened this issue Sep 18, 2019 · 12 comments
Closed

Unable to support server-side rendering #1638

Xzillion opened this issue Sep 18, 2019 · 12 comments

Comments

@Xzillion
Copy link

Xzillion commented Sep 18, 2019

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
Copy link
Author

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
Copy link

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

@Xzillion
Copy link
Author

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
Copy link

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
Copy link
Author

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

@Xzillion
Copy link
Author

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

@owen-m1
Copy link
Member

owen-m1 commented Sep 19, 2019

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
Copy link

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

@Xzillion Xzillion reopened this Sep 19, 2019
@Xzillion
Copy link
Author

@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
Copy link
Member

owen-m1 commented Sep 19, 2019

Ok. I will fix soon.

@owen-m1
Copy link
Member

owen-m1 commented Sep 25, 2019

@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
Copy link
Member

owen-m1 commented Oct 12, 2019

This was solved in 1.10.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants