Degraded developer experience / HMR consistently causing Log In screen to show.

[nboliver-ventureweb]

Every change to a component is causing the log in screen to show. After a hard refresh, things work as expected until the component is saved again. The component is a form that uses forwardRef and is shared by multiple routes. Changing code in the route files does not cause the log in screen to show.

[nboliver-ventureweb]

Today I am frequently getting a Cloudflare tunnel error, which can be corrected with a hard refresh. Between that and the Log in screen, development is pretty slow and the Dx is not great. I am enjoying the app stack, but it seems like there's a few things to iron out to make it effective.

[nboliver-ventureweb]

Any update here? Development is painfully slow when every save results in a login screen, which then requires a full page refresh...

[nboliver-ventureweb]

It looks like there are two separate issues causing the login screen to show, and it might actually be related to #599 .
One is this: https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports. I had a Zod schema that is located in a component file that was being unnecessarily exported. Perhaps it could be beneficial to add the linked eslint plugin? https://github.com/ArnaudBarre/eslint-plugin-react-refresh

The other thing seems to pop up randomly - the logs show that shop is missing:

10:01:14 │      remix │ [shopify-app/DEBUG] Missing or invalid shop, redirecting to login path |
{shop: null}
10:01:14 │      remix │ [shopify-app/DEBUG] Authenticate returned a response
10:01:14 │      remix │ [shopify-app/DEBUG] Missing or invalid shop, redirecting to login path |
{shop: null}
10:01:14 │      remix │ [shopify-app/DEBUG] Authenticate returned a response

[vincaslt]

Have you had success applying the eslint rule in a useful way? Remix routes export a bunch of non-component exports (loaders, actions etc.) so it's highlighting more than just problematic exports.

[nboliver-ventureweb]

@vincaslt yeah if you look lower down the docs page for the plugin, there is an example of using allowExportNames with Remix: https://github.com/ArnaudBarre/eslint-plugin-react-refresh?tab=readme-ov-file#allowexportnames-v044
In my config I also added handle to the list of allowed names.

[lizkenyon]

Hi there 👋

Thank you for your patience on this!

I was able to reproduce this, it is seems like the redirection to the login screen happens when vite does a full page reload and triggers a document request. Because the document request is not initiated from the Shopify admin, it is missing the required shop parameter which is why you are then getting kicked over to the login screen.

We are going to continue to try to determine the best solution here. Thanks!