Subscriptions-transport-ws: WebSocketFrame is not defined

[Samuell1]

Hey, after setuping websocket i get this error,
anybody know what i need to change?

Uncaught ReferenceError: WebSocketFrame is not defined

My connection code:

import ApolloClient, { createNetworkInterface, addTypename } from 'apollo-client';

import { Client } from 'subscriptions-transport-ws';
import VueApollo, { addGraphQLSubscriptions } from 'vue-apollo'

const networkInterface = createNetworkInterface({
  uri: 'http://localhost/graphql',
  transportBatching: true,
});

const wsClient = new Client('ws://localhost:3030');

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient,
);

const apolloClient = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
});

Vue.use(VueApollo, {
  apolloClient,
});

and some missing files

 WARNING in ./app/~/websocket/lib/BufferUtil.js                                                                                                         
 Module not found: Error: Cannot resolve 'file' or 'directory' ../build/Release/bufferutil in C:\laragon\www\vet-desktop\app\node_modules\websocket\lib 
  @ ./app/~/websocket/lib/BufferUtil.js 9:19-57                                                                                                         

 WARNING in ./app/~/websocket/lib/BufferUtil.js                                                                                                         
 Module not found: Error: Cannot resolve 'file' or 'directory' ../build/default/bufferutil in C:\laragon\www\vet-desktop\app\node_modules\websocket\lib 
  @ ./app/~/websocket/lib/BufferUtil.js 11:19-57                                                                                                        

 WARNING in ./app/~/websocket/lib/Validation.js                                                                                                         
 Module not found: Error: Cannot resolve 'file' or 'directory' ../build/Release/validation in C:\laragon\www\vet-desktop\app\node_modules\websocket\lib 
  @ ./app/~/websocket/lib/Validation.js 9:21-59                                                                                                         

 WARNING in ./app/~/websocket/lib/Validation.js                                                                                                         
 Module not found: Error: Cannot resolve 'file' or 'directory' ../build/default/validation in C:\laragon\www\vet-desktop\app\node_modules\websocket\lib 
  @ ./app/~/websocket/lib/Validation.js 11:21-59                         

[Samuell1]

Any update?

[helfer]

@Samuell1 can you provide more information, like a stack trace and some details about your setup? This is most likely because your project isn't set up right.

[Samuell1]

My dependencies

  "dependencies": {
    "apollo-client": "^0.5.25",
    "electron-config": "^0.2.1",
    "feed-read": "0.0.1",
    "file-loader": "^0.9.0",
    "lodash": "^4.17.3",
    "lodash-addons": "^1.0.0",
    "moment": "^2.17.0",
    "os-locale": "^2.0.0",
    "raven-js": "^3.9.1",
    "semver": "^5.3.0",
    "subscriptions-transport-ws": "^0.3.1",
    "url-loader": "^0.5.7",
    "vue": "^2.1.8",
    "vue-apollo": "^1.3.0",
    "vue-electron": "^1.0.6",
    "vue-i18n": "^4.9.0",
    "vue-moment": "^2.0.2",
    "vue-multiselect": "^2.0.0-beta.13",
    "vue-popup": "^0.2.14",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.2"
  },

And I using electron for desktop app but that error is on webpack hotreload server.

[NeoPhi]

Possibly related to https://github.com/socketio/socket.io-client/issues/933

[Urigo]

We replace the websocket package recently (in https://github.com/apollographql/subscriptions-transport-ws/issues/53). @Samuell1, can you please try with the new version? we will release it really soon.

[Samuell1]

@Urigo i try it and some errors
Uncaught TypeError: _subscriptionsTransportWs.Client is not a constructor

./app/~/ws/lib/BufferUtil.js
Module not found: Error: Can't resolve 'bufferutil' in 'C:\laragon\www\electronapp\app\node_modules\ws\lib'
 @ ./app/~/ws/lib/BufferUtil.js 10:19-40
 @ ./app/~/ws/lib/Sender.js
 @ ./app/~/ws/index.js
 @ ./app/~/subscriptions-transport-ws/dist/server.js
 @ ./app/src/apollo/index.js
 @ ./app/src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:9081 webpack/hot/dev-server ./app/src/assets/fonts/index.js ./app/src/assets/scss/app.scss ./app/src/app.js
client?d3b9:106 ./app/~/ws/lib/Validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in 'C:\laragon\www\electronapp\app\node_modules\ws\lib'
 @ ./app/~/ws/lib/Validation.js 10:19-44
 @ ./app/~/ws/lib/Receiver.js
 @ ./app/~/ws/index.js
 @ ./app/~/subscriptions-transport-ws/dist/server.js
 @ ./app/src/apollo/index.js
 @ ./app/src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:9081 webpack/hot/dev-server ./app/src/assets/fonts/index.js ./app/src/assets/scss/app.scss ./app/src/app.js

[Urigo]

@Samuell1 the API is different now.
Please check out the readme and update accordingly as I see you are using an old API

[Samuell1]

@Urigo yes i try it, but i have still missing modules from ws

These dependencies were not found in node_modules

* bufferutil in ./app/~/ws/lib/BufferUtil.js     
* utf-8-validate in ./app/~/ws/lib/Validation.js 

[Samuell1]

@Urigo if i installed them i get other error. What i need to do?

 warning  in ./app/~/bindings/bindings.js                                    

76:22-40 Critical dependency: the request of a dependency is an expression   

[Samuell1]

@Urigo I updated to new apollo-client 1.0.0-rc6 and subscriptions-transport-ws 0.5.5-alpha.0, and its same

Webpack config

'use strict'

const path = require('path')
const settings = require('./config.js')

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const UglifyJsPlugin = require('uglify-js-plugin')

const config = {

  devtool: '#eval-source-map',

  entry: [
    './app/src/assets/fonts/index.js',
    './app/src/assets/scss/app.scss',
    './app/src/app.js'
  ],

  devServer: {
    quiet: true,
    // overlay: true
  },

  performance: {
    hints: false
  },

  output: {
    path: path.join(__dirname, 'app/dist'),
    libraryTarget: 'commonjs2',
    filename: 'build.js'
  },

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
            scss: 'vue-style-loader!css-loader!sass-loader',
            css: 'vue-style-loader!css-loader',
            less: 'vue-style-loader!css-loader!less-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['es2015', 'stage-0']
        }
      },
      {
        test: /\.css$/,
        loader: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.html$/,
        loader: 'vue-html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          query: {
            limit: 10000,
            name: 'assets/images/[name].[ext]'
          }
        }
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]'
      },
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader'
      }
    ]
  },

  resolve: {
    modules: [
      path.join(__dirname, 'app', 'node_modules'),
      path.join(__dirname, 'node_modules')
    ],
    alias: {
      'components': path.join(__dirname, 'app/src/components'),
      'store': path.join(__dirname, 'app/src/store'),
      'graphql-schemes': path.join(__dirname, 'app/src/apollo/graphql'),
      'empty-data': path.join(__dirname, 'app/src/utils/empty-data.js')
    },
    extensions: ['.js', '.vue', '.json', '.css', '.scss']
  },

  target: 'electron-renderer',

  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './app/index.ejs',
      title: settings.name
    }),
    new FriendlyErrorsPlugin()
  ]
}

/**
 * Adjust config for production settings
 */
if (process.env.NODE_ENV === 'production') {
  config.devtool = ''

  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true
      },
      compress: {
        screw_ie8: true
      },
      comments: false
    })

  )
}

module.exports = config

[Urigo]

@Samuell1
We changed a lot in the recent commits, and updated the version of ws package.
Can you please try with the current master?

[Samuell1]

@Urigo Hey, i tested it with latest 0.6.0, and same warnings, but subscriptions works

WEBPACK-> These dependencies were not found:                                         

          * utf-8-validate in ./app/~/ws/lib/Validation.js                           
          * bufferutil in ./app/~/ws/lib/BufferUtil.js                               

          To install them, you can run: npm install --save utf-8-validate bufferutil 

[mistic]

@Samuell1 you should test with current master and not with 0.6.0 version :D We are about to release 0.7.0 version, so please wait for it and test again :)

[Samuell1]

@mistic i tested latest 0.7.0 and same :/

Failed to compile.

./app/~/ws/lib/Validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in 'C:\laragon\www\vet-desktop\app\node_modules\ws\lib'
 @ ./app/~/ws/lib/Validation.js 10:22-47
 @ ./app/~/ws/lib/Receiver.js
 @ ./app/~/ws/index.js
 @ ./app/~/subscriptions-transport-ws/dist/server.js
 @ ./app/~/subscriptions-transport-ws/dist/index.js
 @ ./app/src/apollo/index.js
 @ ./app/src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:9081 webpack/hot/dev-server ./app/src/assets/scss/app.scss ./app/src/app.js)

[dotansimha]

@Samuell1 did you try to npm install utf-8-validate with version 0.7.0?

[Samuell1]

@dotansimha i dont need to install them, they are in ws dependency

[dotansimha]

@Samuell1 I know, but it seems like you bundler does not recognize it..

[RayzRazko]

Hey, guys. I just installed recent version (0.7.3) that is public and I got same errors as @Samuell1 :

Module not found: Error: Can't resolve 'utf-8-validate'
Module not found: Error: Can't resolve 'bufferutil'

[RayzRazko]

Seems like other libraries had same problems with dependencies on ws module. Check this thread

[mistic]

@Samuell1 @RayzRazko Are u still having this problem?

[Samuell1]

@mistic still same errors

Temp fix is to ignore that plugins :(
new webpack.IgnorePlugin(/utf-8-validate|bufferutil/)

[RayzRazko]

@mistic still having this problem.

Temp fix for me is importing library like:
import {SubscriptionClient} from 'subscriptions-transport-ws/dist/client';

btw my target is web.

[fitfab]

I have the same issue:
These modules were not found:

• utf-8-validate in ./node_modules/ws/lib/Validation.js
• bufferutil in ./node_modules/ws/lib/BufferUtil.js
  and this is my package.json

{
  "name": "with-apollo",
  "version": "2.0.0",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "express": "^4.15.4",
    "graphql": "^0.11.4",
    "isomorphic-fetch": "^2.2.1",
    "material-ui": "^0.19.2",
    "next": "latest",
    "npm": "^5.4.2",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-apollo": "^1.1.3",
    "react-dom": "^15.5.4",
    "striptags": "^3.1.0",
    "styled-jsx": "^1.0.10",
    "subscriptions-transport-ws": "^0.9.0",
    "ws": "^3.2.0"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-react-server": "^0.6.0"
  }
}

[Toxicable]

Also getting this error on v0.9.4
This only happens when using webpack to bundle up my server.
If I exclude it from the bundle it succeeds, however I need to be able to bundle it

[simonrumi]

Hi...wondering what the resolution to this issue was...?

I'm getting these 2 warnings

WARNING in ../node_modules/ws/lib/buffer-util.js
Module not found: Error: Can't resolve 'bufferutil'

WARNING in ../node_modules/ws/lib/validation.js
Module not found: Error: Can't resolve 'utf-8-validate'

I have [email protected]
which is in turn using [email protected]
which has these as devDependencies
"bufferutil": "~3.0.0",
"utf-8-validate": "~4.0.0"
...but I don't see a node_modules folder in the ws folder

can I ignore these warnings?

Thanks!

[simonrumi]

FWIW (in case anyone sees this in future) I simply did
npm install bufferutil utf-8-validate
which added these to my package.json (that is several levels up from the files that were having those errors) and this made the warnings go away