javascript - Laravel-mix@6.0.10 遇到未知错误 Uncaught DOMException : Failed to construct 'WebSocket'

Question

在 [email protected] 出现未知错误未捕获的 DOMException:无法构造“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();

控制台错误

谢谢:)

Answer 1

我添加了“ws”协议(protocol)并且它有效，

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