Uncaught TypeError: Cannot read property 'trim' of null

[alexblack]

Hi, I'm trying to integrate react-refresh-webpack-plugin into my existing app, and after attempting to follow the setup steps, and starting my app, I get an error that looks very similar to #216

My webpack.config is somewhat complex - the app is a google scripts add-on based on https://github.com/enuchi/React-Google-Apps-Script, with my react-app being inlined into some static HTML. I already have HMR working, eg if I change a file and hit save, then the app reloads with the new code, but the state is lost, so I was hoping to improve that with react-refresh.

Thanks in advance!

index.mjs:1 Uncaught TypeError: Cannot read property 'trim' of null
    at Module.m (index.mjs:1)
    at getSocketUrlParts (getSocketUrlParts.js:22)
    at initWDSSocket (WDSSocket.js:16)
    at Object.<anonymous> (ErrorOverlayEntry.js:76)
    at Object../node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ErrorOverlayEntry.js (ErrorOverlayEntry.js:86)
    at __webpack_require__ (bootstrap:792)
    at fn (bootstrap:100)
    at Object.1 (sidebar-impl.html?dialogId=undefined:90404)
    at __webpack_require__ (bootstrap:792)
    at bootstrap:892

[pmmmwh]

Hi, can you try the latest beta and see if it works for you?

[alexblack]

Hi, can you try the latest beta and see if it works for you?

I'll give that a shot and report back, thanks.

[alexblack]

Hi, can you try the latest beta and see if it works for you?

Thanks, I tried 0.5.0-beta.1 and this issue no longer occurs! Unrelated - my HMR now seems to have stopped working as expected. Looking in the javascript console I do indeed see files being rebuilt, but I don't see the changes reflected in the app.

I'll review my config and see if I can find any issues.

[alexblack]

Which version of react-refresh should I use with ^0.5.0-beta.1 of react-refresh-webpack-plugin? I'm using 0.10.0

[pmmmwh]

The version of react-refresh is fine.

Are you manually wiring up HMR? Are you doing any externalisation of React (as seen in the boilerplate you've based off)?

[alexblack]

The version of react-refresh is fine.

Thanks!

Are you manually wiring up HMR? Are you doing any externalisation of React (as seen in the boilerplate you've based off)?

My HMR and React setup is the same as in that boilerplate. I haven't dug into how its setup in detail, but I see hot: true in my webpack config, and the usual if (module.hot) in the the server code

[pmmmwh]

How does your Webpack config look?

Usually when updates are not reflected on screen it's either:

• There is other HMR code running, overriding our handlers
• react-refresh did not get to run before ANY React code, such as being in a different chunk, not externalised correctly, etc.
• react-refresh/babel plugin not applied

[alexblack]

How does your Webpack config look?

Very similar to: https://github.com/enuchi/React-Google-Apps-Script/blob/master/webpack.config.js

• There is other HMR code running, overriding our handlers

Do you know what I should/could look for in my code for this? I'm not aware of anything, but I'm not sure

• react-refresh did not get to run before ANY React code, such as being in a different chunk, not externalised correctly, etc.

This sounds like it is something worth confirming/checking. But I'm not quite sure how to go about that. This boiler plate's setup is definitely not completely standard, as it has to get React working inlined in static HTML served into an iframe.

• react-refresh/babel plugin not applied

I believe I've got this done properly. I've added it in two spots in the webpack config:

https://github.com/enuchi/React-Google-Apps-Script/blob/master/webpack.config.js#L120
https://github.com/enuchi/React-Google-Apps-Script/blob/master/webpack.config.js#L131

[enuchi]

Hey @pmmmwh @alexblack, worked this out in enuchi/React-Google-Apps-Script#96 with help from #13 so might be okay to close.

Edit: it's this one #334

[pmmmwh]

Resolved upstream