Static GitHub Issues

[1721] Failed to resolve async component default: ReferenceError: WebSocket is not defined

prev: ReferenceError > location is not defined
next: how to use the url-loader?

Nuxt does not seem to work with native WebSocket:

<template>
      <section class="container">
        <img src="~assets/img/logo.png" alt="Nuxt.js Logo" class="logo" />
        <h1 class="title">
          USERS
        </h1>
        <ul class="users">
          <li v-for="(user, index) in users" :key="index" class="user">
            <nuxt-link :to="{ name: 'id', params: { id: index }}">
              {{ user.name }}
            </nuxt-link>
          </li>
        </ul>
      </section>
    </template>
    
    <script>
    import axios from '~/plugins/axios'
    
    // Create WebSocket connection.
    const socket = new WebSocket('ws://localhost:3000')
    
    // Connection opened
    socket.addEventListener('open', function (event) {
      socket.send('Hello Server!')
    })
    
    // Listen for messages
    socket.addEventListener('message', function (event) {
      console.log('Message from server ', event.data)
    })
    
    export default {
      async asyncData () {
        let { data } = await axios.get('/api/users')
        return { users: data }
      },
      head () {
        return {
          title: 'Users'
        }
      }
    }
    </script>

Error:

[vue-router] Failed to resolve async component default: ReferenceError: WebSocket is not defined
    [vue-router] uncaught error during route navigation:
    ReferenceError: WebSocket is not defined
        at Object.63 (pages/index.d7b0919763c4b48f1dd4.js:124:18)
        at __webpack_require__ (server-bundle.js:27:30)
        at Object.57 (pages/index.d7b0919763c4b48f1dd4.js:9:306)
        at __webpack_require__ (server-bundle.js:27:30)

Any ideas?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1543">#c1543</a>)</em></sub></div>