Error on HMR reload

I am trying to use fast refresh with WPS. With some components it works fine however with others, I get this error.

Plugin version 0.4.1 WPS: 1.0.1

main.js:558 Uncaught (in promise) Error: Aborted because ./src/client/views/home/HomeView.js is not accepted
Update propagation: ./src/client/views/home/HomeView.js -> ./src/client/views/routes.js -> ./src/client/app.js -> ./src/client/main.js -> 0
    at hotApplyInternal (main.js:558)
    at hotApply (main.js:412)
    at replace (hmr.js?797c:60)
hotApplyInternal @ main.js:558
hotApply @ main.js:412
replace @ hmr.js?797c:60
async function (async)
replace @ hmr.js?797c:47
eval @ client.js?a662:70

Any pointers where could the issue lie?

[pmmmwh]

(Sorry for missing this)

You mean “meaningful” or “clear” (…what the problem is)?

Yes.

Why does the tsx file end up being in the browser at all? webpack-dev-server should only access the dist folder with .js files. I’m a bit confused…

How webpack-dev-server and source error works is that they compile files on the fly and store them in memory - so index.tsx is not actually being served to the browser, it’s just that the error originates from code within that file.

So that means that at some point it’s expected that your HMR bails out if no valid React component is found, right?! So everything is ok and this “error” you display is more kind of an information?!

Yes. Let’s say your component tree is like this: Component A -> index.ts (ReactDOM.render)

If Component A is changed and we can update it, fine we won’t propagate the update (only Component A updates). But if the update from Component A defies what we require for a safe update, we would have to go to its parent. However, it’s parent is also unsafe to update in place - so eventually we bubbled to “root” which means to the actual entry point of the JS - so the only way we can guarantee consistency is to bail out (in browsers this equals a full refresh).

That is also not something we print - it is what webpack-dev-server prints when it hits a bail out case.

• If I have an index.tsx which imports an App.tsx function compnent and renders it with ReactDOM => no refresh on change of App.tsx
• If I have an index.tsx which includes the App function component inline => refresh but this error above
• If I have index.tsx which has a bit of JSX like <div>…</div> and imports App.tsx and puts it between the divs like <div><App/ ></div> or right the the <App /> in ReactDOM.render(<App />, … => all good on change of App.tsx but the error of above when changing index.tsx

Refering to the case I’ve described above - the best way to avoid unnecessary bail outs when you edit code paths that is very close to root (i.e. ReactDOM.render) is to not have any JSX at all in the file you do ReactDOM.render.

This is because we only construct boundaries with exports, and the file containing ReactDOM.render would most likely not have any exports, thus will never have a boundary.

[julpat]

In my case, it was caused by additional export next to component export:

// removing export solved the issue
export const SOME_CONST = 'Value';

export default function SomeComponent({}) { ... }