websocket failed while connecting to feathersjs

[Adebowale Samson]

everytime i connect my nuxt app with feathersjs. all i got is the following error
WebSocket connection to 'ws://localhost:3030/socket.io/?EIO=3&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 400
no special configuration was done, i just followed the full-nuxt-example on vuex.feathersjs.com

Steps to reproduce

to create feathersjs app using feathers generate app then follow the prompt
to create nuxtjs app use npx create-nuxt-app also follow the prompt, then add Feathers-Vuex using vuex.feathersjs.com

nuxt dependencies
    "@feathersjs/authentication-client": "^4.5.11",
    "@feathersjs/feathers": "^4.5.11",
    "@feathersjs/rest-client": "^4.5.11",
    "@feathersjs/socketio-client": "^4.5.11",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/pwa": "^3.0.2",
    "@vue/composition-api": "^1.0.0-beta.24",
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "cookie-storage": "^6.1.0",
    "core-js": "^3.6.5",
    "feathers-hooks-common": "^5.0.4",
    "feathers-vuex": "^3.15.0",
    "nuxt": "^2.14.6",
    "nuxt-client-init-module": "^0.1.9",
    "socket.io-client": "^2.4.0"

feathersjs dependencies
    "@feathersjs/authentication": "^4.5.3",
    "@feathersjs/authentication-local": "^4.5.4",
    "@feathersjs/authentication-oauth": "^4.5.4",
    "@feathersjs/configuration": "^4.5.3",
    "@feathersjs/errors": "^4.5.3",
    "@feathersjs/express": "^4.5.4",
    "@feathersjs/feathers": "^4.5.3",
    "@feathersjs/socketio": "^4.5.4",
    "@feathersjs/transport-commons": "^4.5.11",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "faker": "^5.1.0",
    "feathers-graph-populate": "^1.2.0",
    "feathers-sequelize": "^6.2.0",
    "helmet": "^3.23.3",
    "mysql2": "^2.2.5",
    "sequelize": "^6.3.0",
    "serve-favicon": "^2.5.0",
    "winston": "^3.0.0"

nuxt.config.js
  env: {
    API_URL: process.env.API_URL || 'http://localhost:3030',
    BASE_URL: process.env.BASE_URL || 'http://localhost:3000'
  },
  plugins: [
    { src: '~/plugins/feathers-vuex.js' }
  ],
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    'nuxt-client-init-module'
  ],
  build: {
    transpile: ['feathers-vuex']
  }

NodeJS version:
12.18.3
Operating System:
Windows 10
Browser Version:
Chrome Version 87.0.4280.88

[Jems]

Make sure to update socket.io packages to their latest version.
A breaking has been reverted in there latest version.

[Adebowale Samson]

Thanks

[corepay]

Make sure to update socket.io packages to their latest version.
A breaking has been reverted in there latest version.

Hi @J3m5 - can you clarify? The feathers break was using socket @3.01 - @daffl said we need to rollback/pin feathers to @2.4.1 and when I launch a fresh feathers-vuex project it will not launch with error requiring a rollback.

[Jems]

Sorry, it is the latest version of the compatible version, the 2.4.1 package.

[corepay]

Right - got it and to further clarify the socket.io-client version in feather-vuex needs to be downgraded to 2.40 (latest 2.x release). Instructions for a new/clean install of feathers-vuex installs socket.io-client@3.05 which is no longer compatible with feathers server.