iframe errors

[glekner]

These errors started after adding react-refresh and babel (typescript). any idea what causes this?

[pmmmwh]

This is due to SockJS, used in webpack-dev-server.

If you are not using WDS, you should probably configure the socket integration as stated in the README.

If you're using WDS, this issue is likely happening because a proper WebSocket implementation was not detected by SockJS in the browser, and thus it is falling back to using an iframe-based Cross Origin solution - which will get blocked by X-Frame-Options: deny obviously.

You can work-around this by using the native ws integration provided by WDS, but it still won't work in browsers without socket implementations.

[pmmmwh]

I'll be closing this because this is unrelated to the plugin.

[glekner]

hey @pmmmwh
switching transportMode to ws indeed fixes the issue.
could this break something else in the code? the app seems to run fine, browser support is also pretty decent if i'm not wrong?

[pmmmwh]

could this break something else in the code?

No. If it does please redirect your issue to the webpack-dev-server repo.

browser support is also pretty decent if i'm not wrong?

As shown in caniuse, you're covered 97.57% of the time.

[glekner]

nice, I do get a warning of still using SockJS even though I cant find any reference to the pattern sockjs || sock-js in the code?

WebSocket connection to 'ws://localhost:9000/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 200

[pmmmwh]

nice, I do get a warning of still using SockJS even though I cant find any reference to the pattern sockjs || sock-js in the code?

WebSocket connection to 'ws://localhost:9000/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 200

If you use a custom socket path for WDS - you will have to tell the plugin. sockjs-node is the default fallback path hard-coded in WDS and in the plugin for the WDS integration.

[glekner]

Thanks, hijacking this issue for another question
Is it possible to not use:?

Note 1: If you use webpack.config.ts, please also install type-fest as a peer dependency.

I'm not getting any type errors without it.

[pmmmwh]

I'm not getting any type errors without it.

In theory, this shouldn't be the case - you can take a look at the files within types and clearly we have dependency on type-fest for error overlay options at least - maybe if you don't use these options tsc is smart enough to not warn ...

[glekner]

If you use a custom socket path for WDS - you will have to tell the plugin. sockjs-node is the default fallback path hard-coded in WDS and in the plugin for the WDS integration.

@pmmmwh
I'm using ws instead of the default sock-js as you advised.
Do you know what path/port do I need to change in the plugin options?

[pmmmwh]

Do you know what path/port do I need to change in the plugin options?

Please post your dev server config here 😊

[glekner]

I fixed it :)
Because were running a bridge proxy just needed to add the webpack port to the plugin config.
It didn't work on 0.4.0.beta6 ! I still got the error for some reason.
I downgraded to 0.3.3

          new ReactRefreshWebpackPlugin({
            overlay: {
              sockPort: WDS_PORT,
            },
          }),

[pmmmwh]

I fixed it :)
Because were running a bridge proxy just needed to add the webpack port to the plugin config.
It didn't work on 0.4.0.beta6 ! I still got the error for some reason.

I will ... Erm ... Have to take a look at it then I guess 😂

[pmmmwh]

Error addressed in #133.

[glekner]

@pmmmwh is there a way to disable the error overlay? without sacrificing the new sockPort I just added to the overlay object?

[pmmmwh]

@pmmmwh is there a way to disable the error overlay? without sacrificing the new sockPort I just added to the overlay object?

sockPort only affects the overlay, so if you disable it you don't need to include the flag.