Unable to support server-side rendering

[Xzillion]

Problem:

Unable to support server-side rendering

Version

2.23.0

Environment

chrome 76, nodejs v8.11.3

Reproduction link

https://codesandbox.io/embed/example-hello-world-uhgyt

Steps to reproduce

import vuedraggable in server side rendering project

What is expected?

show server side rendering page

What is actually happening?

ReferenceError:
navigator is not defined

[David-Desmaisons]

Fixed in version 2.23.1

[AndrewLosseff]

Having the same problem
Error:
ReferenceError: navigator is not defined
Version:
"vuedraggable": "^2.23.1"

Environment
node v11.14.0
Chrome: 76

dependencies
"@nuxtjs/axios": "^5.3.6",
"node-sass": "^4.12.0",
"nuxt": "^2.0.0",
"sass-loader": "^8.0.0",
"vuedraggable": "^2.23.1"

[David-Desmaisons]

Could share the stack @AndrewLosseff ?

[AndrewLosseff]

Could sahre the stack @AndrewLosseff ?

Not sure about what stack means.
package.json?

"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"node-sass": "^4.12.0",
"nuxt": "^2.0.0",
"sass-loader": "^8.0.0",
"vuedraggable": "^2.23.1"
},
"devDependencies": {
"@nuxtjs/eslint-config": "^1.0.1",
"@nuxtjs/eslint-module": "^1.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-plugin-prettier": "^3.0.1",
"prettier": "^1.16.4"
}

[David-Desmaisons]

Error:
ReferenceError: navigator is not defined

Where this came from?

[AndrewLosseff]

There are two cases:

1. When the static page is reloading (error in browser)
2. When I ran yarn generate in terminal (error in terminal)

[David-Desmaisons]

Make sure you are using version 2.23.1
The think is that in this version vue.draggable does not use navigator and only require sirtable.js in the mounted hook which is not called in SSR context.

[AndrewLosseff]

Interesting
Just did

1. yarn remove vuedraggable
2. yarn add [email protected]
   Still the same problem

Then it might be problem with yarn

[AndrewLosseff]

Still facing the issue
Even tried download package by hands and replace it in node_modules
Strangely I see 'navigator' in app.js

Didn't solve the problem, any ideas are very welcome)

Error output from browser
node_modules/sortablejs/Sortable.js:138:5
userAgent
node_modules/sortablejs/Sortable.js:143:20
node_modules/sortablejs/Sortable.js:8:83
node_modules/sortablejs/Sortable.js:11:2
internal/modules/cjs/loader.js:936:30
Module._compile
internal/modules/cjs/loader.js:947:10
Module._extensions..js
internal/modules/cjs/loader.js:790:32
Module.load
internal/modules/cjs/loader.js:703:12
Module._load
internal/modules/cjs/loader.js:830:19
Module.require

[David-Desmaisons]

I don't think this is yarn related.
Thanks for the stack.
Do you have the part of the stack showing who is requiring sortable.js?

[AndrewLosseff]

In the browser I have this message:
node_modules/sortablejs/Sortable.js

 var version = "1.10.0";

  function userAgent(pattern) {
    return !!
    /*@__PURE__*/
    navigator.userAgent.match(pattern);
  }

  var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);

Line return !! is red

[mohanzeal]

Here is the stack

navigator is not defined

Open: /usr/src/app/node_modules/sortablejs/Sortable.js
  function _nonIterableSpread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance");
  }
 
  var version = "1.10.0";
 
  function userAgent(pattern) {
    return !!
    /*@__PURE__*/
    navigator.userAgent.match(pattern);```

[transtone]

it's not solved yet.

#732

[AndrewLosseff]

@transtone
David opened a new issue here: SortableJS/Sortable#1646

[David-Desmaisons]

Corrected in version 2.23.2

[AndrewLosseff]

Thanks a lot!