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>