Laravel-mix: [6.*] websocket not included in bundled asset when running --hot

[oluwatosin-me]

• Laravel Mix Version: 6.0.0 (npm list --depth=0)
• Node Version (node -v): 14
• NPM Version (npm -v): 6
• OS: linux

Description:

For some reason the client websocket (ws or sockjs-node) responsible for hot reloading modules, is not included in the bundle, when running npx watch --hot. This causes the frontend to have a stale assets and not respond to changes. I have spent quite a while to get to the bottom but no success so far.

[thecrypticace]

So there's a few things wrong here:

1. The hot file has a trailing slash
2. Laravel's mix() helper adds a leading slash to paths
3. Webpack's dev server v4 (idk about v3) doesn't know that //js/manifest.js and /js/manifest.js are the same file. The one without the extra slash gets the HMR client injected but the one with the extra slash does not.
4. If I manually fix this to test HMR then whether or not we're using Socket JS or Websockets it seems that the url isn't correct because it strips the port from it.

While we could fix the issue with the hot file in Mix or in Laravel (preferably both). It still appears HMR is just totally broken in webpack-dev-server at the moment. I'll put it in my reminders to track down the problem further and file a bug.

[oluwatosin-me]

I will try to apply a temporary fix and see if it works. I also think i should throw this here:

When running --hot on windows i get this error:
Error: \js\index.css is neither a posix nor a windows path, and there is no 'dirname' method defined in the file system
at dirname (C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\webpack\lib\util\fs.js:137:9)
at C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\webpack\lib\Compiler.js:745:19
at arrayIterator (C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\neo-async\async.js:3467:9)
at timesSync (C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\neo-async\async.js:2297:7)
at Object.eachLimit (C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\neo-async\async.js:3463:5)
at emitFiles (C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\webpack\lib\Compiler.js:534:13)
at C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\webpack\lib\util\fs.js:178:5
at Immediate. (C:\Users\HolluwaTosin\Laravel\Cryptonite\node_modules\memfs\lib\volume.js:684:17)
at processImmediate (internal/timers.js:461:21)

\js\index.css here is the extracted css file from \js\index.js. It is weird because, it compiles well in --prod or watch but I get this error only when running --hot. I however, tried this on homestead virtual machine, and it compiles without error, running --hot

[AhsanAbrar]

npx mix watch --hot

only working with these versions at the moment

[email protected]
[email protected]

OS: Windows 10

[mojtabaahn]

@oluwatosin-me I'm getting same error when running npm run hot:

<i> [webpack-dev-server] Project is running at http://localhost:8080//
<i> [webpack-dev-server] Content not from webpack is served from C:\laragon\www\next-platform\public
<i> [webpack-dev-server] 404s will fallback to /index.html
C:\laragon\www\next-platform\node_modules\webpack\lib\util\fs.js:141
                throw new Error(
                ^

Error: \dist\app.js is neither a posix nor a windows path, and there is no 'dirname' method defined in the file system
    at dirname (C:\laragon\www\next-platform\node_modules\webpack\lib\util\fs.js:141:9)
    at C:\laragon\www\next-platform\node_modules\webpack\lib\Compiler.js:790:19
    at arrayIterator (C:\laragon\www\next-platform\node_modules\neo-async\async.js:3467:9)
    at timesSync (C:\laragon\www\next-platform\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\laragon\www\next-platform\node_modules\neo-async\async.js:3463:5)
    at emitFiles (C:\laragon\www\next-platform\node_modules\webpack\lib\Compiler.js:536:13)
    at C:\laragon\www\next-platform\node_modules\webpack\lib\util\fs.js:182:5
    at Immediate.<anonymous> (C:\laragon\www\next-platform\node_modules\memfs\lib\volume.js:684:17)
    at processImmediate (internal/timers.js:461:21)

Had you any progress with it?

[oluwatosin-me]

set

mix.webpackConfig({
    output : {
        path : path.resolve(Config.publicPath),
    }
})

in your mix file

[thecrypticace]

This might be a windows specific problem. I'll look into it tomorrow.

[oluwatosin-me]

That is not the only issue yet to be fixed on hmr. Let me list them so you can address them together

[thecrypticace]

Oof okay yes please do. I tested HMR on my side to get websockets and all working on macOS and Linux. Had to put in a super weird workaround which I guess didn't work on Windows. :/

[oluwatosin-me]

1. On windows you get the above error: https://github.com/JeffreyWay/laravel-mix/issues/2666#issuecomment-748516826, but when run on linux (homestead) it runs without any error.
2. When it finally runs on linux (homestead). On console you will get the following error, which causes the assets not to load

WebsocketClient.js:42 Uncaught DOMException: Failed to construct 'WebSocket': The URL '//192.168.20.10:8085/sockjs-node' is invalid.
    at new WebsocketClient (http://192.168.20.10:8085//js/index.js:173362:20)
    at initWDSSocket (http://192.168.20.10:8085//js/index.js:58527:24)
    at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js (http://192.168.20.10:8085//js/index.js:57079:3)
    at Object.options.factory (http://192.168.20.10:8085//js/index.js:174919:31)
    at __webpack_require__ (http://192.168.20.10:8085//js/index.js:174310:32)
    at checkDeferredModulesImpl (http://192.168.20.10:8085//js/index.js:175629:24)
    at __webpack_require__.x (http://192.168.20.10:8085//js/index.js:175642:69)
    at Function.__webpack_require__.x (http://192.168.20.10:8085//js/index.js:175667:26)
    at http://192.168.20.10:8085//js/index.js:175676:38
    at http://192.168.20.10:8085//js/index.js:175677:12

1. Since devServer.transportMode is set to ws by default, I did set it to sockjs, which finally loads the assets and HMR works at this point but I get an error log on console:

Access to XMLHttpRequest at 'http://192.168.20.10:8085/sockjs-node/info?t=1608413673536' from origin 'http://cryptonite.test' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

sockjs.js:1609 GET http://192.168.20.10:8085/sockjs-node/info?t=1608413673536 net::ERR_FAILED

The following log shows that another variant of websocket script was successfully loaded afterwards:
sockjs.js:1609 XHR finished loading: GET "http://192.168.20.10:8085/ws/info?t=1608413673535"

[J-Brk]

I'm using v6.0.0-beta.17 and ran into the same issue with the trailing slash and the missing websocket package. Can't we just remove the trailing slash from the hot file creation? Or implement a check there?
https://github.com/JeffreyWay/laravel-mix/blob/b112e13d0a3fb5602872b29bde497e4e96f78230/src/HotReloading.js#L13

After I removed the trailing slash there all my paths seem to return correctly and it's working fine with the WS now.