Laravel-mix@6.0.10 got unknown error Uncaught DOMException: Failed to construct 'WebSocket'

user_8592918 0
Viewed 221

In Laravel-mix@6.0.1 got unknown error Uncaught DOMException: Failed to construct 'WebSocket'

While running script with

yarn mix watch --hot

but without --hot seems every thing work fine. not sure why this error thrown with only --hot argument.

Info

// package.json
{
  "private": true,
  "devDependencies": {
    "@babel/preset-react": "^7.12.10",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "cross-env": "^7.0",
    "laravel-mix": "^6.0.10",
    "postcss": "^8.1",
    "react-hot-loader": "^4.13.0",
    "react-refresh": "^0.9.0",
    "resolve-url-loader": "^3.1.0"
  }
}

// webpack-mix.js

mix.webpackConfig({
    resolve: {
        extensions: [".js", ".jsx"],
        alias: {
            "@": __dirname + "/resources/js",
        },
    },
});

mix.js("resources/js/index.js", "public/js").react();

Console Error

Console Error

Thanks :)

laravel-mix webpack javascript
1 Answers

I added the "ws" protocol and it works,

{{ Project_location }} \\node_modules\@pmmmwh\react-refresh-webpack-plugin\sockets\WDSSocket.js

/* global __webpack_dev_server_client__ */

const url = require('native-url');
const getSocketUrlParts = require('./utils/getSocketUrlParts');

/**
 * Initializes a socket server for HMR for webpack-dev-server.
 * @param {function(*): void} messageHandler A handler to consume Webpack compilation messages.
 * @param {string} [resourceQuery] Webpack's `__resourceQuery` string.
 * @returns {void}
 */
function initWDSSocket(messageHandler, resourceQuery) {
  if (typeof __webpack_dev_server_client__ !== 'undefined') {
    const SocketClient = __webpack_dev_server_client__;

    const urlParts = getSocketUrlParts(resourceQuery);

//----------------------------------------------------------
    urlParts.protocol = "ws"; // <<-----  Add this line
//----------------------------------------------------------

    const connection = new SocketClient(url.format(urlParts));

    connection.onMessage(function onSocketMessage(data) {
      const message = JSON.parse(data);
      messageHandler(message);
    });
  }
}

module.exports = initWDSSocket;
user_89201170
Related