SyntaxError: unsupported binaryType: must be either "nodebuffer" or "arraybuffer"

[foxhound87]

I'm trying to integrate the server HMR into my existing project.

The first time the page is loaded correctly, I can navigate in my app without problems, but if I call a route hitting enter on the address bar, sometimes I get this error: SyntaxError: unsupported binaryType: must be either "nodebuffer" or "arraybuffer" (similar to this: websockets/ws#725)

Any suggestions?

thanks

[ericclemmons]

@foxhound87 Can you provide an example repo, or update this example to show it? I've never seen this error before :D

[foxhound87]

@ericclemmons
You can see the code of my project (on the server-hmr branch):
https://github.com/foxhound87/rfx-stack/tree/server-hmr

I fixed the error as suggested in the ws issue adding these lines:
https://github.com/foxhound87/rfx-stack/blob/59d44bd6f3eff823563fe7b5a3c9180b34f3da3d/webpack/config.server.dev.js#L55-L57

but though I don't get errors (and on the terminal it seems going all ok) the server hmr is not working at all, changes are not applied.

I'm using webpack-dev-middleware and webpack-hot-middleware to provide client-side hmr in conjunction with the server-side hmr, would be appreciated if you could take a look at the configurations.

Thanks

[ericclemmons]

You're right, that regex doesn't catch socket.io because it has a . in it. (It's a pretty naive regex just for this example).

Personally, I ended up using this monstrosity after having problems with node-externals:

function nodeModuleExists(request) {
  try {
    fs.accessSync(path.resolve(process.cwd(), "node_modules", request));
  } catch (e) {
    return false;
  }

  return true;
}

...
  .externals(
    function(context, request, callback) {
      if (
        /node_modules/.test(context)
        || (
          /^@?\w[a-z\-0-9\./]+$/.test(request)
          &&
          (
            nodeModuleExists(request)
            ||
            nodeModuleExists(`${request}.js`)
          )
        )
      ) {
        return callback(null, `commonjs ${request}`);
      }

      callback();
    }
  )

[foxhound87]

@ericclemmons Thanks for the answer.

I'm trying webpack-node-externals like this:

import nodeExternalModules from 'webpack-node-externals';
...
    externals: [nodeExternalModules({
      whitelist: ['webpack/hot/poll?1000'],
    })],
...

If I get errors I will try your solution.

I'm having trouble using ['es2015', { modules: false }] in .babelrc.
As I'm using es6 syntax into the webpack config too, I added that into the query of the loader only for the dev-server config, but it seems not to work yet.
If I set that globally into the .babelrc the es6 imports stop working (with SyntaxError: Unexpected token import).