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
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:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire•6mo ago
npx wscat --connect ws://localhost:5001
error: Unexpected server response: 200
@kapa.ai
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-sapphire•6mo ago
http://localhost:5002/ Upgrade Required @kapa.ai
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:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
absent-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
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:
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:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below