Ws: WebSocket.Server is not a constructor

Created on 26 Mar 2019 · 5Comments · Source: websockets/ws

content is same with title.

I used 'ws' module in electron main process not browser.

It work on local environment, but occur error with message 'WebSocket.Server is not a constructor' when packaging.

I'm tried to solve this with add external: ['WebSocket', 'WebSocketServer'] in webpack.config.js. but It didn't work.

anyone who can solve this problem. please, tell me how to solve.

Source

pyeongoh

Most helpful comment

I can confirm the solution by @pyeongoh is working fine. In my case I was using Vue with electron-builder and I had to add the following configuration options to vue.config.js:

module.exports = {
  configureWebpack: {
    resolve: {
      mainFields: ['main', 'browser']
    }
  }
}

Afterwards everything worked as expected.

andypotato on 20 Jun 2019

👍4

All 5 comments

webpack probably uses this https://github.com/websockets/ws/blob/master/browser.js. You have to configure it to ignore the browser field in package.json. With browserify this can be done with the --no-browser-field flag.

I don't know how to do the same with webpack, maybe https://webpack.js.org/configuration/resolve/#resolvealiasfields?

lpinca on 26 Mar 2019

this is will be closed, this problem is because of module import order problem,
In my webpack configurations, resolve.mainFields's value was ordered by with 'browser' > 'main',
so, I changed order to 'main' > 'browser' and It works right .
thx to @lpinca, I've got the hint from your comment.

pyeongoh on 26 Mar 2019

I can confirm the solution by @pyeongoh is working fine. In my case I was using Vue with electron-builder and I had to add the following configuration options to vue.config.js:

module.exports = {
  configureWebpack: {
    resolve: {
      mainFields: ['main', 'browser']
    }
  }
}

Afterwards everything worked as expected.

andypotato on 20 Jun 2019

👍4

@andypotato's workaround did not work for me.

This worked though:

Add a custom alias for ws to always target main in webpack.config.js (since the browser version only reports an error in case you are using it directly in the browser, however I'm using ws in conjunction with socket.io which won't let that happen luckily):

module.exports = {
  // ...
  alias: {
    // ...
    'ws': path.resolve(path.join(projectRoot, 'node_modules/ws/index.js' )) // fix for https://github.com/websockets/ws/issues/1538
  }
};

Hoping that there will be a better solution soon!

Domiii on 23 Jan 2020

I can confirm the solution by @pyeongoh is working fine. In my case I was using Vue with electron-builder and I had to add the following configuration options to vue.config.js:
module.exports = {
  configureWebpack: {
    resolve: {
      mainFields: ['main', 'browser']
    }
  }
}
Afterwards everything worked as expected.

Funny enough, this is a suitable workaround for https://github.com/websockets/ws/issues/1459 as well.