SSR support #18

New issue

Closed

SSR support#18

Labels

enhancement

tobeorla

¿Will SSR be supported?

ReferenceError: window is not defined
at C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12046
at C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:11978
at p.exports (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12264)
at Object. (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:12740)
at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408)
at Object.module.exports.render._h.staticClass (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:9170)
at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408)
at Object. (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:640)
at e (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:408)
at p.__esModule.default (C:\app\node_modules\vue-infinite-loading\dist\vue-infinite-loading.js:1:496)

PeachScript

Owner

Excuse me, I don't know what is the SSR, could you explain to me?

cwirz

here: https://rc.vuejs.org/guide/ssr.html

cwirz

Does someone know how to prevent this error?: ReferenceError: window is not defined

PeachScript

Owner

Thanks for your explanation @Wirzi , SSR stands for Server-Side rendering.

But in fact I hasn't been used it, so I need some time to try it, if you solved this problem, please help me to improve this plugin, thanks again :)

cwirz

Sure I will help but i just started to use server side rendering.
I think we should change the code to make sure window is not called when code is running on server, because there is no window in node: https://rc.vuejs.org/guide/ssr.html#Simple-SSR-with-the-Express-Web-Server

added

I could make it work using jsdom.

const jsdom     = require('jsdom').jsdom
//...
global.document = jsdom('<!doctype html><html><body></body></html>', { url: 'http://localhost' })
global.window   = document.defaultView
global.navigator = window.navigator

put this at the top of server/express source file.

Note: Still better that the plugin check for the existence of window var.

diogobeda

I had to use this project on a server rendered app and made some changes to make it work. I currently don't have too much time to make an appropriate pull request, but I'll leave the commit that made it work here if anyone or the author wants to turn it into an actual pull request for both master and next branches.

This is the commit:
https://github.com/diogobeda/vue-infinite-loading/commit/ce4fa5594bcd1d11a13c1abe9cd2012e7b3014ed

What I had to do was:

Extract the styles to a file, cause a code injected by style-loader was referencing window
Remove the global component registration. This most probably doesn't have to go, you can import Vue from 'vue' to register it globally.
To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.

cc @PeachScript

PeachScript

Owner

@diogobeda Thank you very much! I try your solution and find the key point to support SSR, the key point is the style-loader doesn't support local export, details in here, so I think we cannot find a prefect solution before the style-loader changes.

And I found a workaround to support SSR, you just need two steps for your SSR app:

use import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue'; instead of import InfiniteLoading from 'vue-infinite-loading;
npm install less less-loader --save-dev if you have not installed them

I tested it successfully with this demo vue2-ssr-example, perhaps this workaround can help you :D @tobeorla @cwirz @josemanuelp @diogobeda

diogobeda

Awesome @PeachScript. I was using my forked version, will definitely use your workaround now. Thanks :)

PeachScript

closed this as completed

on Jan 29, 2017

PeachScript

Owner

Glad you like the workaround @diogobeda , I closed this issue and you can reopen it if you need in the future.

gokhanozdemir

This solution also works with Nuxt.js, thanks @PeachScript .

PeachScript

Owner

@gokhanozdemir you're welcome :D

mohitgupta1918

I am using vue-infinite-loading with nuxj.js for SSR.I did perform both the steps of workaround mentioned by @PeachScript .I am using the vue-infinite-loading in 'ListItems.vue' component
I am still getting an error:

ERROR in ./~/vue-infinite-loading/src/components/InfiniteLoading.vue
Module not found: Error: Can't resolve 'less-loader' in '/home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/src/components'
 @ ./~/vue-infinite-loading/src/components/InfiniteLoading.vue 3:0-197
 @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"]}!./~/vue-loader/lib/selector.js?type=script&index=0!./components/listing/ListItems.vue
 @ ./components/listing/ListItems.vue
  @ ./pages/plp.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js

./~/vue-infinite-loading/src/components/InfiniteLoading.vue
Module not found: Error: Can't resolve 'less-loader' in '/home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/src/components'
resolve 'less-loader' in '/home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/src/components'
  Parsed request is a module
  using description file: /home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/package.json (relative path: ./src/components)
  after using description file: /home/mohitg/node_projects/project_name/node_modules/vue-infinite-loading/package.json (relative path: ./src/components)
    resolve as module
      looking for modules in /home/mohitg/node_projects/project_name/node_modules/nuxt/node_modules
        using description file: /home/mohitg/node_projects/tproject_name/node_modules/nuxt/package.json (relative path: ./node_modules)
...

17 remaining items

NoraGithub

错误信息：

[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token <
[vue-router] uncaught error during route navigation:
/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:4386:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.264 (11.server-bundle.js:406:114)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.126 (11.server-bundle.js:9:144)
    at __webpack_require__ (server-bundle.js:27:30)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7)
/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
                                                              ^
SyntaxError: Unexpected token <
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:4386:18)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.264 (11.server-bundle.js:406:114)
    at __webpack_require__ (server-bundle.js:27:30)
    at Object.126 (11.server-bundle.js:9:144)
    at __webpack_require__ (server-bundle.js:27:30)
    at process._tickDomainCallback (internal/process/next_tick.js:135:7) '/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-infinite-loading/src/components/InfiniteLoading.vue:1\n(function (exports, require, module, __filename, __dirname) { <template>\n                                                              ^\nSyntaxError: Unexpected token <\n    at createScript (vm.js:53:10)\n    at Object.runInThisContext (vm.js:95:10)\n    at Module._compile (module.js:543:28)\n    at Object.Module._extensions..js (module.js:580:10)\n    at Module.load (module.js:488:32)\n    at tryModuleLoad (module.js:447:12)\n    at Function.Module._load (module.js:439:3)\n    at Module.require (module.js:498:17)\n    at require (internal/module.js:20:19)\n    at r (/Users/NoraChan/Desktop/geekhacker.tech/frontEnd/node_modules/vue-server-renderer/build.js:8330:16)\n    at Object.<anonymous> (server-bundle.js:4386:18)\n    at __webpack_require__ (server-bundle.js:27:30)\n    at Object.264 (11.server-bundle.js:406:114)\n    at __webpack_require__ (server-bundle.js:27:30)\n    at Object.126 (11.server-bundle.js:9:144)\n    at __webpack_require__ (server-bundle.js:27:30)\n    at process._tickDomainCallback (internal/process/next_tick.js:135:7)'

PeachScript

Owner

@NoraGithub 如果是基于 Nuxt，建议配合 no-ssr 使用而不是像这样加载组件。

frederic117

Hello
I'm using Nuxt too!
i try what @ckpiggy and @dnlup suggest but i got this error...
Please, a little help :)
fred

(function (exports, require, module, __filename, __dirname) {
^

SyntaxError: Unexpected token <
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at r (C:\Users\Frederic_2\Documents\InsidersFoot\node_modules\vue-server-renderer\build.js:8341:16)
at Object.vue-infinite-loading/src/components/InfiniteLoading.vue (server-bundle.js:105744:18)
at webpack_require (webpack/bootstrap:19:0)
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./client/components/connect/StreamTimelineBabble.vue?vue&type=script&lang=js& (client/components/connect/StreamTimelineBabble.vue?0e15:1:0)
at webpack_require (webpack/bootstrap:19:0)
at Module../client/components/connect/StreamTimelineBabble.vue?vue&type=script&lang=js& (client/components/connect/StreamTimelineBabble.vue?dba4:1:0)

Skasi

@frederic117 I've had the same problem after upgrading to nuxt 2.x and node 10.x. I solved it by using a plugin that is not rendered serverside.

Add a plugin to the plugins folder:

/plugins/infinite-loading.js

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.use(InfiniteLoading)

plugins: [
  { src: '~/plugins/infinite-loading.js', ssr: false }
]

Now you can use the <infinite-loading> component in your templates.

PeachScript

Owner

@Skasi good idea, I will add it into docs, thanks! And is the <no-ssr></no-ssr> also can works?

Skasi

@PeachScript when using the plugin, yes:
plugins: [ { src: '~/plugins/infinite-loading.js' } ] in combination with <no-ssr><infinite-loading/></no-ssr> works.

But without using a plugin, when importing the component and registering it with vue I get the same error others already mentioned. It worked in the past, but no longer after updating node and nuxt.

<template>
  <div>
    <no-ssr>
      <infinite-loading/>
    </no-ssr>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading.vue'

  export default {
    name: 'test',
    components: {
      InfiniteLoading
    }
  }
</script>

× error C:\Project\node_modules\vue-infinite-loading\src\components\InfiniteLoading.vue:1
  (function (exports, require, module, __filename, __dirname) { <template>
  ^

  SyntaxError: Unexpected token <
  at new Script (vm.js:79:7)
  at createScript (vm.js:251:10)
  at Object.runInThisContext (vm.js:303:10)
  at Module._compile (internal/modules/cjs/loader.js:656:28)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
  at Module.load (internal/modules/cjs/loader.js:598:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
  at Function.Module._load (internal/modules/cjs/loader.js:529:3)
  at Module.require (internal/modules/cjs/loader.js:636:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at r (C:\Project\node_modules\vue-server-renderer\build.js:8341:16)
  at Object.vue-infinite-loading/src/components/InfiniteLoading.vue (server-bundle.js:11419:18)
  at __webpack_require__ (server-bundle.js:27:30)
  at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/test.vue?vue&type=script&lang=js& (pages_test.js:13:113)
  at __webpack_require__ (server-bundle.js:27:30)
  at Module../pages/test.vue?vue&type=script&lang=js& (pages_test.js:101:195)

PeachScript

Owner

@Skasi got it, thank you for spending time on these details, it is very great and useful!

xiewl

@PeachScript 下午好，在vue组件内直接引用import InfiniteLoading from 'vue-infinite-loading'; 再加上no-ssr标签在最新版（v2.4.0）会报找不到window。但我记得以前是可以的。然后我去翻另一个Nuxt项目的代码，发现（v2.3.1）版本是可以正常运行的。

PeachScript

Owner

@xiewl 根据 Skasi 提供的信息，可能是新版本 Nuxt API 变动导致的，你可以参考一下他上面的评论进行验证。

xiewl

@xiewl 根据 Skasi 提供的信息，可能是新版本 Nuxt API 变动导致的，你可以参考一下他上面的评论进行验证。

@PeachScript 应该不是这个原因。因为我这边两个项目的nuxt都是同一个版本（v1.4.0）。不同点在于vue-infinite-loading的版本一个是（v2.4.0）,一个是（v2.3.1）。我将2.4.0这个项目重装为2.3.1就正常了。我和Skasi的引用方式不太一样，我是 import InfiniteLoading from 'vue-infinite-loading'; 再加上no-ssr标签

<template>
  <div>
    <no-ssr>
      <infinite-loading/>
    </no-ssr>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    name: 'test',
    components: {
      InfiniteLoading
    }
  }
</script>

PeachScript

Owner

@xiewl 了解了，我这边先复现一下，感谢反馈。

PeachScript

Owner

Hi @Skasi @xiewl , I've released a new version v2.4.2 to fix this problem, now this plugin can works properly with Nuxt.js, just need to wrap it with no-ssr component (like v2.3.3 and below), no need any extra configuration. Please comment here if you found any problem.

kvanska

I'm using nuxtjs 2.8 and vue-infinite-loading 2.4.4 and ran into an issue that I could not produce in a 'clean' new project. When doing a page reload, infinite-loading works as expected but when routing to a page with infinite-loading from SPA nuxt-link I got exception:

TypeError: Cannot read property 'tagName' of null at VueComponent.getScrollParent

getScrollParent recursively finds the parent element and for some reason when loading in SPA, parent node is null for:

<div class="page">

on page refresh it's not null and parent is set to window

<body>
<div id="__nuxt">
<div id="__layout">
<div class="page>

I solved this by setting the force-use-infinite-wrapper property to the element containing the actual list and this solves the problem. I could not find out why this happens though?

connecteev

@kvanska I've been struggling for days trying to get infinite loading to work in Nuxt with SSR. Any chance you can point to an example of this?

JanusSpark

@frederic117 I've had the same problem after upgrading to nuxt 2.x and node 10.x. I solved it by using a plugin that is not rendered serverside.

Add a plugin to the plugins folder:

/plugins/infinite-loading.js
import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'

Vue.use(InfiniteLoading)
Register the plugin in nuxt.config.js and disable SSR.
plugins: [
  { src: '~/plugins/infinite-loading.js', ssr: false }
]
Now you can use the <infinite-loading> component in your templates.

@Skasi Hello,I write the code like you mentioned.And It works fine in npm run dev mode. But it can't work fine with production.Do you have the same problem？And how can I init infinite-loading after the dom ready,I guess maybe it isn't init normally

<client-only><infinite-loading></infinite-loading></client-only>
I resolve it with client-only

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

enhancement

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SSR support #18

17 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

SSR support #18

Description

Activity

PeachScript commented on Oct 9, 2016

cwirz commented on Oct 10, 2016

cwirz commented on Oct 10, 2016

PeachScript commented on Oct 10, 2016

cwirz commented on Oct 10, 2016

josemanuelp commented on Jan 5, 2017

diogobeda commented on Jan 18, 2017

PeachScript commented on Jan 19, 2017

diogobeda commented on Jan 19, 2017

PeachScript commented on Jan 29, 2017

gokhanozdemir commented on Mar 6, 2017

PeachScript commented on Mar 9, 2017

mohitgupta1918 commented on Mar 21, 2017

17 remaining items

NoraGithub commented on Jun 19, 2018

PeachScript commented on Jun 19, 2018

frederic117 commented on Oct 1, 2018

Skasi commented on Nov 2, 2018

PeachScript commented on Nov 3, 2018

Skasi commented on Nov 6, 2018

PeachScript commented on Nov 6, 2018

xiewl commented on Nov 7, 2018

PeachScript commented on Nov 7, 2018

xiewl commented on Nov 7, 2018

PeachScript commented on Nov 7, 2018

PeachScript commented on Nov 23, 2018

kvanska commented on Jun 4, 2019

connecteev commented on Sep 15, 2019

JanusSpark commented on Oct 15, 2020

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

Issue actions