title: render function or template not defined in component: anonymous
body: <p>I have such a problem, after reloading the page an error occurs."render function or template not defined in component: anonymous". I think the error is due to socket.io. 
  What does this error do not occur on the local machine, but on the production. <a href="https://dev.jujuway.com/user/messages" rel="noreferrer">dev версия</a> <a href="https://i.stack.imgur.com/RtwT3.png" rel="noreferrer">error</a></p>
  
  <p>server.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const APP_ENV = require('./.env.js')
  const { Nuxt, Builder } = require('nuxt')
  const app = require('express')()
  let server = require('http').Server(app)
  
  if(APP_ENV.ssl) {
    const fs = require('fs')
    const options = {
      key: fs.readFileSync(APP_ENV.ssl_key),
      cert: fs.readFileSync(APP_ENV.ssl_cert)
    }
    server = require('https').Server(options, app)
  }
  
  const port = process.env.PORT || APP_ENV.ws_port
  const isProd = process.env.NODE_ENV === 'production'
  
  // We instantiate Nuxt.js with the options
  let config = require('./nuxt.config.js')
  config.dev = !isProd
  
  const nuxt = new Nuxt(config)
  // Start build process in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    builder.build()
  }
  app.use(nuxt.render)
  if (APP_ENV.socket) {
    const io = require('socket.io')(server)
    const Redis = require('ioredis')
    const redis = new Redis(APP_ENV.redis.port, APP_ENV.redis.host)
    redis.psubscribe(['*'])
    redis.on('pmessage', function (subscribe, channel, message) {
      message = JSON.parse(message)
      console.log('Server: ', subscribe, channel, message.data.message)
      io.emit(channel + ':' + message.event, message.data)
    })
  
    // io.on('connection', function (socket) {
    // })
  }
  
  server.listen(port, function () {
    console.log('Listening on Port ' + port)
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>plugins/socket.io.js
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>``
  
  import io from 'socket.io-client'
  
  const socket = io(process.env.WS_URL)
  
  export default socket</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>io/index.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>module.exports = function () {
    const APP_ENV = require('../.env.js')
    const server = require('http').createServer(this.nuxt.renderer.app)
  
    // overwrite nuxt.listen()
    this.nuxt.listen = (port, host) =&gt; new Promise((resolve) =&gt; server.listen(port || 3000, host || 'localhost', resolve))
    // close this server on 'close' event
    this.nuxt.hook('close', () =&gt; new Promise((resolve) =&gt; server.close(resolve)))
  
    // Add `socket.io-client` in vendor
    this.addVendor('socket.io-client')
  
    if (APP_ENV.socket) {
      const io = require('socket.io')(server)
      const Redis = require('ioredis')
      const redis = new Redis(APP_ENV.redis.port, APP_ENV.redis.host)
      redis.psubscribe(['*'])
      redis.on('pmessage', function (subscribe, channel, message) {
        message = JSON.parse(message)
        console.log('Server: ', subscribe, channel, message.data.message)
        io.emit(channel + ':' + message.event, message.data)
      })
  
      // io.on('connection', function (socket) {
      // })
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>message/index.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class="my-messages"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col"&gt;
            &lt;h3&gt;Мои сообщения&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="col"&gt;
            &lt;div class="chat-wrap"&gt;
              &lt;div class="chat-tabs__content active"&gt;
                &lt;div class="chat-tabs"&gt;
                  &lt;!--&lt;div class="chat-tabs__item active"&gt;Входящие &lt;span v-if="userMessage.count &gt; 0"&gt;{{ userMessage.count }}&lt;/span&gt;&lt;/div&gt;--&gt;
                  &lt;!--&lt;div class="chat-tabs__item"&gt;Системные--&gt;
                    &lt;div v-for="(tab,index) in tabs" :key="index"&gt;
                      &lt;div class="chat-tabs__item" @click="changeTab(index)" :class="{'chat-tabs__item active': tab.active}"&gt;{{tab.title}}
                    &lt;/div&gt;
                    &lt;!-- &lt;span&gt;1&lt;/span&gt; --&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="chats-list"&gt;
                  &lt;div class="chats-list__body" data-simplebar &gt;
                    &lt;div class=""&gt;
  
                      &lt;div class="chat-item" v-if="user.name != 'Системные' &amp;&amp; tabs.incoming.active" @click.stop="chengeTab(index, user.id)" :class="{ active: tabUsers[index] }" v-for="(user, index) in userMessage.users" :key="index"&gt;
                        &lt;div class="chat-item__ava"&gt;
                          &lt;img v-if="user.user_avatar_path" :src="baseUrl + 'items-original/' + user.user_avatar_path" :alt="user.name"&gt;
                          &lt;span v-else&gt;{{ user.name[0] | uppercase }}{{ user.name[1] | uppercase }}&lt;/span&gt;
                          &lt;div v-if="user.unread &gt; 0" class="chat-item__new-messages"&gt;{{ user.unread }}&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="chat-item__interlocutor"&gt;
                          {{ user.name }}
                        &lt;/div&gt;
                        &lt;!--&lt;div class="chat-item__last-messages" v-html="user.message"&gt;--&gt;
                        &lt;!--&lt;/div&gt;--&gt;
                        &lt;div class="chat-item__data"&gt;
                          &lt;!-- 13:25 --&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div v-if="!chat_mob" class="chats"&gt;
                  &lt;div class="chat-body active"&gt;
                    &lt;div class="chat"&gt;
                      &lt;div class="chat__header"&gt;
                        &lt;div class="chat__interlocutor"&gt;
                          &lt;div  class="chat-back" @click="chatBack"&gt;
                            &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                 width="14.617px" height="8px" viewBox="0 0 14.617 8" style="enable-background:new 0 0 14.617 8;" xml:space="preserve"&gt;
                                &lt;path style="fill:#DDE1E6;" d="M10.585,5.447c-0.85,0-1.7,0.013-2.549-0.003C6.603,5.418,6.419,5.531,6.489,6.973
                              c0.008,0.158-0.011,0.312-0.052,0.468C6.303,7.95,5.766,8.159,5.32,7.867C4.009,7.009,2.699,6.15,1.388,5.291
                              c-0.321-0.21-0.65-0.41-0.966-0.628C-0.131,4.282-0.146,3.7,0.41,3.332C2.011,2.271,3.626,1.23,5.23,0.171
                              C5.909-0.278,6.516,0.224,6.49,0.896C6.48,1.153,6.489,1.41,6.489,1.667c0,0.58,0.288,0.871,0.864,0.871c2.135,0,4.269,0,6.404,0
                              c0.573,0,0.859,0.291,0.86,0.876c0,0.415,0.003,0.83-0.001,1.245c-0.004,0.475-0.322,0.787-0.798,0.788
                              C12.74,5.447,11.663,5.447,10.585,5.447z"/&gt;
                            &lt;/svg&gt;
                          &lt;/div&gt;
                          &lt;div v-if="chatUser &amp;&amp; (chatUser.name != 'Системные' &amp;&amp; tabs.incoming.active )"&gt;{{ chatUser.name }}&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!-- &lt;div class="chat__actions"&gt;
                          &lt;div class="chat-menu"&gt;
                            &lt;div class="chat-menu__icon" @click.prevent="show = !show"&gt;
                              &lt;svg class="icon-svg icon-svg-header-chat-menu"&gt;&lt;use xlink:href="/img/sprite.svg#header-chat-menu"&gt;&lt;/use&gt;&lt;/svg&gt;
                            &lt;/div&gt;
                            &lt;ul class="chat-menu__dropdown" :class="{ show: show }"&gt;
                              &lt;li&gt;
                                Отключить уведомения
                              &lt;/li&gt;
                              &lt;li&gt;
                                Очистить историю
                              &lt;/li&gt;
                              &lt;li&gt;
                                Заблокировать контакт
                              &lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt; --&gt;
                      &lt;/div&gt;
                      &lt;div class="chat__body" data-simplebar ref="chatBody"&gt;
                        &lt;!-- &lt;pre&gt;
                          {{
                            chatMessage
                          }}
                        &lt;/pre&gt; --&gt;
                        &lt;div id="message-container" v-if="chatMessage !== []"&gt;
                          &lt;div class="message_wrapper" v-if="checkMessage(message.sender_id) &amp;&amp; (message.sender_id != null &amp;&amp; tabs.incoming.active)" v-for="(message, index) in chatMessage" :key="index"&gt;
                            &lt;div class="message"  :class="{ 'message--to': userCurrent.id === message.sender_id, 'message--from': userCurrent.id !== message.sender_id }"&gt;
                              &lt;div class="message__post-data"&gt;&lt;/div&gt;
  
                              &lt;div class="chat-item__ava message__ava" v-if="userByIdMessage(message.sender_id)" &gt;
                                &lt;img v-if="userByIdMessage(message.sender_id).user_avatar_path !== null" :src="baseUrl + 'items-original/' + userByIdMessage(message.sender_id).user_avatar_path" alt="" class=""&gt;
                                &lt;div v-else &gt;
                                  &lt;span&gt;{{ userByIdMessage(message.sender_id).name[0] | uppercase }}{{ userByIdMessage(message.sender_id).name[1] | uppercase }}&lt;/span&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="chat-item__ava message__ava" v-else&gt;
                                &lt;img v-if="userCurrent.user_avatar_path !== null" :src="baseUrl + 'items-original/' + userCurrent.user_avatar_path" alt="" class=""&gt;
                                &lt;div v-else&gt;
                                  &lt;span&gt;{{ userCurrent.user_name[0] | uppercase }}{{ userCurrent.user_name[1] | uppercase }}&lt;/span&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="message__text" v-html="message.message" &gt;
                              &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="chat-item__last-messages" :class="{ 'created_time_to': userCurrent.id === message.sender_id, 'created_time_from': userCurrent.id !== message.sender_id }"&gt;{{message.created_at}}&lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;form class="chat__form"&gt;
                        &lt;textarea placeholder="Введите сообщение..." @keyup.ctrl.enter="onSendMessage" v-model="message"&gt;&lt;/textarea&gt;
                        &lt;div v-html="img"&gt;&lt;/div&gt;
                        &lt;div class="chat__form-controls"&gt;
                          &lt;div class="add-additions"&gt;
                            &lt;label class="message_img" for="image"&gt;&lt;img src="/img/affix.svg" alt=""&gt;&lt;/label&gt;
                            &lt;input class="img_input" id="image" type="file" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)"&gt;
                          &lt;/div&gt;
                          &lt;button @click.prevent="onSendMessage" &gt;
                            &lt;img src="/img/telega.svg" alt=""&gt;
                          &lt;/button&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;
                    &lt;/div&gt;
                    &lt;div class="interlocutor" v-if="chatUser"&gt;
                      &lt;img
                        v-if="chatUser.user_avatar_path"
                        :src="baseUrl + 'items-original/' + chatUser.user_avatar_path"
                        :alt="chatUser.name"
                        class="interlocutor__img"&gt;
                      &lt;img v-else
                           src="/img/avatar.svg"
                           :alt="chatUser.name"
                           class="interlocutor__img default_ava"&gt;
  
                      &lt;div class="interlocutor__title"&gt;
                        {{ chatUser.name }}
                      &lt;/div&gt;
                      &lt;!--&lt;ul class="interlocutor__info"&gt;--&gt;
                        &lt;!--&lt;li&gt;--&gt;
                          &lt;!--&lt;span&gt;--&gt;
                            &lt;!--&lt;img src="/img/marker-icon.svg" alt=""&gt;--&gt;
                          &lt;!--&lt;/span&gt;--&gt;
                          &lt;!--115280, Москва,--&gt;
                          &lt;!--ул. Ленинская слобода, д. 19--&gt;
                        &lt;!--&lt;/li&gt;--&gt;
                      &lt;!--&lt;/ul&gt;--&gt;
                      &lt;!--&lt;p class="interlocutor__text"&gt;--&gt;
                        &lt;!--На сайте 5 мин., выставленно--&gt;
                        &lt;!--10 товаров. Время с момента регистрации 3 месяца.--&gt;
                      &lt;!--&lt;/p&gt;--&gt;
                      &lt;!--&lt;a href="#" class="btn btn&amp;#45;&amp;#45;xl btn&amp;#45;&amp;#45;border"&gt;--&gt;
                        &lt;!--Перейти к заказу--&gt;
                      &lt;!--&lt;/a&gt;--&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--&lt;div class="container" v-else&gt;--&gt;
        &lt;!--&lt;div class="row"&gt;--&gt;
          &lt;!--&lt;div class="col"&gt;--&gt;
            &lt;!--&lt;h3&gt;Сообщений нет&lt;/h3&gt;--&gt;
          &lt;!--&lt;/div&gt;--&gt;
        &lt;!--&lt;/div&gt;--&gt;
      &lt;!--&lt;/div&gt;--&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
    const DOMAIN = process.env.API_DOMAIN
  
    import socket from '@/plugins/socket.io'
    import { mapActions, mapGetters } from 'vuex'
    import api from '@/api'
  
    export default {
      middleware: 'authenticated',
      data () {
        return {
          chat_mob: false,
          contacts: true,
          tabs: {
            incoming: {
              active: true,
              title: 'Входящие'
            },
            systemic: {
              active: false,
              title: 'Системные'
            }
          },
          virtualUser: false,
          baseUrl: DOMAIN,
          show: false,
          tabUsers: [],
          chatUser: null,
          message: '',
          userId: null,
          test: null,
          img: '',
          check: false
        }
      },
      beforeMount () {
        this.getUserMessage()
        if (socket) {
          let base = this
          socket.on(this.userCurrent.id +':new-user-message', (message) =&gt; {
            base.setSocketMessage({
              sender_id: message.message.from_id,
              message: message.message.message
            })
            base.setMessageCount({
              user_id: message.message.from_id
              }
            )
            base.setUserUnreadMessage({
                count: this.userCurrent.unread_messages + 1
              }
            )
            this.scrollToBottom()
          })
        }
      },
      computed: {
        ...mapGetters({
          getContact: 'message/getContact',
          idUserMessage: 'message/id',
          userMessage: 'message/userMessage',
          chatMessage: 'message/chatMessage',
          userByIdMessage: 'message/userByIdMessage',
          userCurrent: 'user/user'
        }),
        activeTab () {
          let index = null
          if (this.idUserMessage !== null &amp;&amp; this.userMessage !== [] &amp;&amp; this.userMessage.users !== undefined) {
            const user = this.userMessage.users.find(users =&gt; users.id === this.idUserMessage)
            index = this.userMessage.users.indexOf(user)
          }
          return index
        }
      },
      methods: {
        ...mapActions({
          setUserUnreadMessage: 'user/setUserUnreadMessage',
          setUsers: 'message/setUsers',
          addUser: 'message/addUser',
          setMessageCount: 'message/setMessageCount',
          setUnread: 'message/setUnread',
          getUserMessage: 'message/getUserMessage',
          getChatMessage: 'message/getChatMessage',
          createMessage: 'message/createMessage',
          setStoreId: 'message/setStoreId',
          setSocketMessage: 'message/setSocketMessage'
        }),
        checkMessage (id) {
          if (this.idUserMessage !== null &amp;&amp; this.userMessage !== [] &amp;&amp; this.userMessage.users !== undefined){
            const user = this.userMessage.users.find(users =&gt; users.id === id)
            let index = this.userMessage.users.indexOf(user)
            if(index === this.activeTab || id === this.userCurrent.id)
              return true
            else
              return false
          }
  
        },
        chatBack () {
          this.chat_mob = true
          this.contacts = true
          console.log(123)
        },
        changeTab (index) {
          console.log(index)
          for (let key in this.tabs) {
            this.tabs[key].active = false
          }
          this.tabs[index].active = true
        },
        readMessage(id) {
          this.check = true
          const payload = {
            user_id: id
          }
          api.readMessage(payload)
            .then(() =&gt; {
              this.setUnread(payload)
  
            })
        },
        chengeTab(index, id) {
          if(window.innerWidth &lt; 768) {
            this.chat_mob = false
          }
          console.log(index, id)
          this.readMessage(id)
          for (let key in this.userMessage.users) {
            this.tabUsers[key] = false
          }
          this.chatUser = this.userMessage.users[index]
          this.tabUsers[index] = true
          this.tabUsers.push()
          this.getChatMessage({
            user_id: id
          })
          this.setStoreId(id)
          this.userId = id
          this.scrollToBottom()
        },
        linkMessage (message) {
          let reg = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/
          let link = message.match(reg)
          let myMessage = message
          if(link){
            myMessage = message.replace(link[0], '&lt;a href ="'+link[0]+ '"&gt;'+ link[0] + '&lt;/a&gt;')
          }
          return myMessage
        },
        async onSendMessage() {
          if (this.message !== '' &amp;&amp; this.userId &gt; 0 || this.img !=='') {
            this.message = this.linkMessage(this.message)
            this.message = this.message + this.img
            const payload = {
              message: this.message,
              id: this.userId
            }
            console.log(payload)
            this.scrollToBottom()
            this.setSocketMessage({
              sender_id: this.userCurrent.id,
              message: payload.message
            })
            await this.createMessage(payload)
            this.message = ''
            this.img = ''
          }
        },
        scrollToBottom() {
          this.$nextTick(() =&gt; {
            let base = this
            setTimeout(() =&gt; {
              base.$refs.chatBody.getElementsByClassName('simplebar-scroll-content')[0].scrollTop = document.getElementById('message-container').scrollHeight
            }, 500)
            // console.log(document.getElementById('message-container').scrollHeight)
          })
        },
        uploadImg (e) {
          var file = e.target.files[0]
          const formData = new FormData()
          formData.append('image', file)
          api.loadImageChat(formData)
            .then(res =&gt; {
              //this.img = '&lt;br&gt;' +'&lt;a href="' + DOMAIN + 'message-files/' + res.body.data  +'" target="_blank"&gt;&lt;img class="load_img" src="'+ DOMAIN + 'message-files/' + res.body.data +'"&gt;&lt;/a&gt;'
              this.img = '&lt;br&gt;' +'&lt;div class="load_img_wrapper"&gt;&lt;img class="load_img" src="'+ DOMAIN + 'message-files/' + res.body.data +'"&gt;&lt;/div&gt;'
            })
        },
      },
      watch: {
        userMessage: {
          handler (val) {
            if(!this.check) {
              this.tabUsers = []
              if (val !== [] &amp;&amp; this.userMessage) {
                if (this.activeTab !== null &amp;&amp; this.idUserMessage !== null) {
                  this.chengeTab(this.activeTab, this.idUserMessage)
                } else if (this.userMessage.count !== undefined) {
                  this.chengeTab(0, this.userMessage.users[0].id)
                }
  
                if (val.users !== undefined) {
                  this.virtualUser = true
                  if(this.getContact){
                    if(!(val.users.find(user =&gt; user.id === this.getContact.id))){
                      const payload = this.getContact
                      this.addUser(payload)
                     // this.userIndex = this.userMessage.users.length - 1
                      this.chengeTab(this.userMessage.users.length - 1, this.getContact.id)
                    }
                    else{
                      let user = val.users.find(user =&gt; user.id === this.getContact.id)
                      this.userIndex = val.users.indexOf(user)
                      this.chengeTab(this.userIndex, this.userMessage.users[this.userIndex].id)
                    }
                  }
                  for (let key in val.users) {
                    let b = parseInt(key) === 0 ? true : false
                    this.tabUsers.push(b)
                  }
                  if(!this.getContact || !this.virtualUser) {
                    console.log(123)
                    this.chatUser = val.users[0]
                  }
                  else {
                    this.virtualUser = false
                  }
                }
              }
            }
          },
          deep: true
        }
      }
    }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>