SSR support #18
Comments
|
Excuse me, I don't know what is the |
|
Does someone know how to prevent this error?: ReferenceError: window is not defined |
|
Thanks for your explanation @Wirzi , 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 :) |
|
Sure I will help but i just started to use |
|
I could make it work using jsdom. put this at the top of server/express source file. Note: Still better that the plugin check for the existence of window var. |
|
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 This is the commit: What I had to do was:
cc @PeachScript |
|
@diogobeda Thank you very much! I try your solution and find the key point to support SSR, the key point is the And I found a workaround to support SSR, you just need two steps for your SSR app:
I tested it successfully with this demo vue2-ssr-example, perhaps this workaround can help you :D @tobeorla @cwirz @josemanuelp @diogobeda |
|
Awesome @PeachScript. I was using my forked version, will definitely use your workaround now. Thanks :) |
|
Glad you like the workaround @diogobeda , I closed this issue and you can reopen it if you need in the future. |
|
This solution also works with Nuxt.js, thanks @PeachScript . |
|
@gokhanozdemir you're welcome :D |
|
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 |
|
@mohitgupta1918 I have not used |
|
@mohitgupta1918 With Nuxt I ended up copying all the necessary code to my project with credits to @PeachScript under P.S. Thanks for such a good component with detailed docs. |
|
@gokhanozdemir I am also using nuxt.js but the loader is complaining that it can't find the style files imported in @PeachScript Thanks for this awesome component! |
|
I also use nuxt.js too, here is how I integrate nuxt.js with vue-infinite-loading, nuxt.js add support after v1.0.0-rc7
|
|
@ckpiggy I tried your setup and it works. In my instead, I am importing from |
|
@PeachScript in the documentation it says: Buts its actually: |
|
@gijo-varghese what is the difference between them? |
|
@PeachScript Infiniteloading and InfiniteLoading. It was giving me an error |
|
@gijo-varghese oh it's a low-level mistake I will fix it, thank you very much! |
|
Hi @gijo-varghese , it has been fixed :) |
|
we use nuxt of srr , the Samsung S6 UC browser page flashes over |
|
請問我在SSR下 |
|
@jaelys 不必客气，应该是 |
|
这个组件有一个弊端，组件和和其他html一定要在同一个根下，并且其他html必须在用一个元素包裹他们，不然会有页面数据清空现象。
|
|
非常感謝@PeachScript，我在vue-loader include了，目前正常運行中^^ test: /.vue$/, |
|
很抱歉，在今天更新了webpack 3.11.0 less 3.0.0 webpack-dev-middleware 2.0.5 autoprefixer 8.0.0 問題已解決，原因發生在更新了less 2.7.3 -> 3.0.0 ，降回2.7.3已正常， |
@PeachScript 有没有合适的建议怎么加进去？我加进去始终无法解决。 |
|
错误信息： |
|
@NoraGithub 如果是基于 Nuxt，建议配合 |
|
Hello (function (exports, require, module, __filename, __dirname) { SyntaxError: Unexpected token < |
|
@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:
import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading)Register the plugin in plugins: [
{ src: '~/plugins/infinite-loading.js', ssr: false }
]Now you can use the |
|
@Skasi good idea, I will add it into docs, thanks! And is the |
|
@PeachScript when using the plugin, yes: 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> |
|
@Skasi got it, thank you for spending time on these details, it is very great and useful! |
|
@PeachScript 下午好，在vue组件内直接引用import InfiniteLoading from 'vue-infinite-loading'; 再加上no-ssr标签在最新版（v2.4.0）会报找不到window。但我记得以前是可以的。然后我去翻另一个Nuxt项目的代码，发现（v2.3.1）版本是可以正常运行的。 |
@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标签
|
|
@xiewl 了解了，我这边先复现一下，感谢反馈。 |
|
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:
on page refresh it's not null and parent is set to window 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? |
|
@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? |
@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
|
¿Will SSR be supported?
The text was updated successfully, but these errors were encountered: