Laravel-mix@6.0.10 出现未知错误 Uncaught DOMException: Failed to construction 'WebSocket'答案

【问题标题】：Laravel-mix@6.0.10 got unknown error Uncaught DOMException: Failed to construct 'WebSocket'Laravel-mix@6.0.10 出现未知错误 Uncaught DOMException: Failed to construction 'WebSocket'
【发布时间】：2021-01-20 17:49:34
【问题描述】：

在 Laravel-mix@6.0.1 中出现未知错误Uncaught DOMException: Failed to construct 'WebSocket'

在运行脚本时

yarn mix watch --hot

但没有--hot 似乎一切正常。不知道为什么只有 --hot 参数会引发此错误。

信息

// 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();

控制台错误

谢谢:)

【问题讨论】：

标签： javascript webpack laravel-mix

【解决方案1】：

我添加了“ws”协议，它可以工作，

{{ 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;

【讨论】：