link2055 link2056 link2057 link2058 link2059 link2060 link2061 link2062 link2063 link2064 link2065 link2066 link2067 link2068 link2069 link2070 link2071 link2072 link2073 link2074 link2075 link2076 link2077 link2078 link2079 link2080 link2081 link2082 link2083 link2084 link2085 link2086 link2087 link2088 link2089 link2090 link2091 link2092 link2093 link2094 link2095 link2096 link2097 link2098 link2099 link2100 link2101 link2102 link2103 link2104 link2105 link2106 link2107 link2108 link2109 link2110 link2111 link2112 link2113 link2114 link2115 link2116 link2117 link2118 link2119 link2120 link2121 link2122 link2123 link2124 link2125 link2126 link2127 link2128 link2129 link2130 link2131 link2132 link2133 link2134 link2135 link2136 link2137 link2138 link2139 link2140 link2141 link2142 link2143 link2144 link2145 link2146 link2147 link2148 link2149 link2150 link2151 link2152 link2153 link2154 link2155 link2156 link2157 link2158 link2159 link2160 link2161 link2162 link2163 link2164 link2165 link2166 link2167 link2168 link2169 link2170 link2171 link2172 link2173 link2174 link2175 link2176 link2177 link2178 link2179 link2180 link2181 link2182 link2183 link2184 link2185 link2186 link2187 link2188 link2189 link2190 link2191

[Vue.js] Cannot read property 'indexOf' of undefined when using Vue Carousel

I’m using the latest version of vue.js Carousel in my Nuxt JS application. It seems that I get errors on each of my blog posts whenever using the universal mode for Nuxt JS. If I take out vue.js Carousel and do a standard v-for loop, the blogs show perfectly fine, there’s something causing the error when using the carousel.

My code:

<carousel :paginationEnabled=”false” :navigationEnabled=”true” :perPageCustom=”[[250, 1], [1024, 2]]“>
<slide v-for=”blog in blogs.blogs” :key=”blog.id” v-if=”currentBlogDate >= blog.created && blog.created”>
<b-card class=”text-center m-3 p-0 p-md-3”>
<h4 class=”display-4 font-weight-normal mb-3”>{ blog.title | striphtml | truncate(32, ‘…’) }</h4>
<b-card-text class=”text-muted”>{ blog.body | striphtml | truncate(32, ‘…’) }</b-card-text>
<b-button :to=”‘/posts/view/‘ + blog.title” size=”sm” variant=”primary”>Read More<i class=”fas fa-angle-right pl-2”></i></b-button>
</b-card>
</slide>
</carousel>

The error:

TypeError: Cannot read property ‘indexOf’ of undefined

Solution :

Seems like the component is not optimized for server-side rendering.

Keep in mind that Nuxt.js universal has neither window nor document objects during server-side rendering.

Quick fix for you - is to wrap the SSR incompatible components with <no-ssr></no-ssr> component.

https://nuxtjs.org/api/components-no-ssr#the-lt-no-ssr-gt-component