Preact: Failed using preact/compat with react-hot-reload and react-router

[alireza-mh]

Hi,
I tried to migrate from react to preact, so installed preact: "^10.0.0-rc.0" and define alias of preact/compat inside webpack.
I also have react-router-dom: "^5.0.1" installed.
I set up react-hot-loader: "^4.9.0" as well.
in case of production, everything works fine.(react-hot-loader not getting import)
in case of development, I face Uncaught Error: Invariant failed: You should not use <Switch> outside a <Router> error.

I also installed preact: "^8.4.2" and preact-compat and changed my alias to preact-compat and everything worked fine.

[marvinhagemeister]

Thanks for reporting it. We need a little more information to verify and possibly fix the described issue. Do you have a codesandbox or a repo where the issue can be reproduced?

[alireza-mh]

ok I reproduce it and you can access it via below link:
add preact X
in this case, the page trow Invariant failed: You should not use <Switch> outside a <Router> at invariant error in development mode.
when I build the project and serve it with http-server package, it works.

[alireza-mh]

Hi @marvinhagemeister ,
Should I provide more information?

[marvinhagemeister]

@alireza-mh Thanks for posting a repro :+1: I must admit that I have trouble getting it to work. When run via npm start the page displays a plain html page without any JavaScript. Looking at the source there are no <script>-tags present.

[alireza-mh]

@marvinhagemeister, thanks for your reply. yes, you were right. there was an issue on the repo and I fixed it. it will trow Invariant failed: You should not use <Switch> outside a <Router> at invariant error here as well.
(commit with error: feat: add preact)

[cristianbote]

Hi @alireza-mh, I took a look over your repo, and one thing that might be causing that, could be the use of react-router rather than react-router-dom. Could that be the issue?

I've also cloned your repo and ran it, but did not get that Invariant error at all.

[alireza-mh]

Hi @cristianbote, I changed react-router to react-router-dom and I have the same error.

packages should install with yarn.

[marvinhagemeister]

Just checked the code and it seems to be that the Switch component doesn't receive the router's context at all. Not sure why yet though.

[alireza-mh]

@marvinhagemeister, as I mentioned earlier the problem is only in development mode. I pushed a new commit named fix: remove react hot reload ... without react-hot-loader and everything works fine and this is just a temporary workaround.
add preact commit in branch can be used as a reference for fixing this problem.

[marvinhagemeister]

Can confirm that this issue is caused by react-hot-loader. When it's enabled it generates an empty context.

[alireza-mh]

@marvinhagemeister should this labeled as a bug?

[marvinhagemeister]

FYI: We now have an official HMR solution for Preact called prefresh. We recommend everyone switching over to use that :tada: