rare-sapphire•11mo ago

Refine Devtools not showing in app 5173, and also No App Connected in 5001

I already got Refine devtools installed, every packages updated to the latest. npm run dev working but not showing devtools button, 5001 devtools running, manage to get to page http://localhost:5001/overview , it says No App Connected, when I logout console shows "GET http://localhost:5001/api/.auth/sessions/whoami 401 (Unauthorized)", login with Github shows "An account with the same identifier exists already", try Google it worked, but shows No App Connected.

11 Replies

kapa.ai•11mo ago

Hi @lukevo.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems you're facing issues with the refine devtools server. Here are some steps you can take to troubleshoot the issue: 1. Check if the websocket server is running or if there are issues with connecting to it. You can do this by running the following command after you start your development server using npm run dev or similar:

npx wscat --connect ws://localhost:5002

npx wscat --connect ws://localhost:5002

This command will try to connect to the websocket server used for the devtools. If the websocket connection was not working, it wouldn't show the <http://localhost:3001> header in the devtools panel. This mostly ensures the both of them are working or had worked for a while. source (https://discord.com/channels/837692625737613362/1159002778845315092) 2. If you're using the refine start command, note that it is designed to run the production server for the production builds not the development server. In one case, the refine cli fallbacks to running the development server even though you've run the refine start and its the CRA case. refine start doesn't run the devtools server alongside since its designed for production builds and devtools is not going to work with production builds for performance and bundle size concerns. source (https://discord.com/channels/837692625737613362/1159002778845315092) 3. If you're still facing issues, you can try to prevent the devtools-server from running by using the parameter npm run refine dev -- --devtools=false. source (https://github.com/refinedev/refine/issues/5211) 4. If none of the above solutions work, you can temporarily remove devtools from your project by deleting the @refinedev/devtools dependency. source (https://github.com/refinedev/refine/issues/5215) Please note that these are temporary solutions and the refine team is working on a permanent solution for these issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•7mo ago

npx wscat --connect ws://localhost:5001 error: Unexpected server response: 200 @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The Unexpected server response: 200 error message indicates that the WebSocket client (wscat) received an HTTP 200 status code from the server. This is unexpected because when a WebSocket client connects to a WebSocket server, it expects an HTTP 101 status code (Switching Protocols), not a 200 status code. This error could occur if the server at ws://localhost:5001 is not a WebSocket server. Please ensure that the server running on port 5001 is indeed a WebSocket server. If you're trying to connect to the Refine devtools server, it might be running on a different port. In the knowledge sources (https://discord.com/channels/837692625737613362/1159002778845315092), it's mentioned that the devtools server could be running on port 5002. You might want to try connecting to ws://localhost:5002 instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•7mo ago

http://localhost:5002/ Upgrade Required @kapa.ai

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The "Upgrade Required" message typically appears when you're trying to access a WebSocket server (like the Refine devtools server) through a browser or HTTP client. WebSocket servers require an "upgrade" from HTTP to the WebSocket protocol, which browsers and HTTP clients don't typically do when accessing a URL. If you're trying to access the Refine devtools, you should be able to do so through your Refine application when running in development mode. The devtools should automatically connect when you start your application with npm run dev. If you're trying to test the WebSocket connection, you should use a WebSocket client like wscat. You can connect to the WebSocket server with the following command:

npx wscat --connect ws://localhost:5002

npx wscat --connect ws://localhost:5002

This command will attempt to connect to the WebSocket server running on port 5002. If the connection is successful, it means the devtools server is running correctly. If not, there might be an issue with the server or the port it's running on. If you're still having issues, please refer to the Refine documentation (https://refine.dev/docs) or ask for help in the Refine Discord community (https://discord.com/channels/837692625737613362/1159002778845315092). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below

rare-sapphire•6mo ago

<Routes> <Route element={ <Authenticated key="dashboard"> <ThemedLayoutV2 Header={ThemedHeaderV2} Sider={ThemedSiderV2} Title={ThemedTitleV2}> <CanAccess> <Outlet /> </CanAccess> </ThemedLayoutV2> </Authenticated> }> <Route index element={<NavigateToResource />} /> <Route path="/patient" element={<PatientList><Outlet /></PatientList>}> <Route path="create" element={<LogAndRender />} /> </Route> </Route> <Route path="/login" element={<AuthPage type="login" registerLink={false} />} /> </Routes> Even with this simple Route setting, it's still not console logging @kapa.ai

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Based on the provided code, it seems like you're trying to log something when the /patient/create route is accessed. However, it's not clear what LogAndRender component does as it's not defined in the provided code. If LogAndRender is a component that logs something to the console, make sure that it's implemented correctly. Here's a simple example of a component that logs a message to the console when it's rendered:

function LogAndRender() {
  console.log('Navigated to /patient/create');
  return <div>Create Patient</div>;
}

function LogAndRender() {
  console.log('Navigated to /patient/create');
  return <div>Create Patient</div>;
}

If you're still not seeing any console logs, there might be an issue with how your routes are nested. In your current setup, the /patient/create route is a child of the /patient route, which is a child of another route that doesn't have a path. This could potentially cause issues with how your routes are matched. If you're still having issues, please refer to the Refine documentation (https://refine.dev/docs) or ask for help in the Refine Discord community (https://discord.com/channels/837692625737613362/1159002778845315092). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below