Refine DevTools not working

Hello! I've tried doing my homework before asking this question. But I can't seem to get the Refine DevTools working: - I've upgraded to the latest Refine packages (including DevTools) - I've wrapped my Refine component in DevtoolsProvider and added DevtoolsPanel to my app - I'm starting the dev server with refine dev NOT refine start - The refine dev server is running on port 5173 - The refine devtools server is running on port 5001 ( default) - No Devtools panel is appearing in my refine app - The Refine Devtools server says No app connected I just want to preview my Tanstack Query queries and inspect the generated query keys, but I have to hop through these hoops now that the Tanstack Query devtools were removed from Refine. Thank you!
No description
No description
No description
kapa.ai
kapa.ai67d ago
Hi @Millerbyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry to hear that you're having trouble with Refine DevTools. Based on the information you've provided and the extracts I have, here are a few things you can try: 1. Check your installation: Make sure you've installed the DevTools correctly. You can install it using the following commands:
npm run refine devtools init
npm i @refinedev/devtools
npm run refine devtools init
npm i @refinedev/devtools
And then wrap your Refine component with DevtoolsProvider and add DevtoolsPanel to your app like this:
import { Refine } from "@refinedev/core";
import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";

const App = () => {
return (
<DevtoolsProvider>
<Refine
// ...
>
{/* ... */}
<DevtoolsPanel />
</Refine>
</DevtoolsProvider>
);
};
import { Refine } from "@refinedev/core";
import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";

const App = () => {
return (
<DevtoolsProvider>
<Refine
// ...
>
{/* ... */}
<DevtoolsPanel />
</Refine>
</DevtoolsProvider>
);
};
(Source: Refine Documentation (https://refine.dev/docs/guides-concepts/development#using-devtools)) 2. Check your environment: There have been issues reported where DevTools cannot be used outside of localhost (Github Issue #5111 (https://github.com/refinedev/refine/issues/5111)). If you're running your development in Docker containers or similar environments, this might be the issue. 3. Check for conflicts: There have been issues reported where the application does not start after installation due to port conflicts (Github Issue #5215 (https://github.com/refinedev/refine/issues/5215)). Make sure that the ports 5173 and 5001 are not being used by other services. 4. Try disabling and re-enabling DevTools: As a last resort, you can try disabling the DevTools server by using the parameter npm run refine dev -- --devtools=false, and then re-enabling it (Github Issue #5211 (https://github.com/refinedev/refine/issues/5211)). If none of these suggestions work, I recommend reaching out to the Refine community on their Discord Server (https://discord.gg/refine) for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai67d ago
<@379028227336830977> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua
ambitious-aqua67d ago
I've also deleted and reinstalled my node_modules to be safe
ambitious-aqua
ambitious-aqua67d ago
A project ID was also generated and added to my package.json and Refine.options prop
No description
No description
ambitious-aqua
ambitious-aqua67d ago
@kapa.ai I've tried all those suggestions, but the DevtoolsPanel does not appear in my app and the DevTools server running on localhost:5001 still says No App Connected
kapa.ai
kapa.ai67d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still having trouble. Based on the information available, it seems like there might be an issue with the connection between your application and the DevTools server. Here are a few more things you can try: 1. Check your WebSocket connection: There might be an issue with the WebSocket server used by DevTools. You can check this by running the following command after starting your development server:
npx wscat --connect ws://localhost:5002
npx wscat --connect ws://localhost:5002
This command will try to connect to the WebSocket server used by DevTools. If it's not working, it might be the cause of your issue. (Source: Discord Support Thread (https://discord.com/channels/837692625737613362/1159002778845315092)) 2. Check for environment variable conflicts: There have been cases where conflicting environment variables caused issues with DevTools. Specifically, the PORT variable might cause conflicts. You can try running the DevTools individually without leaving it to the dev command to avoid this conflict. (Source: Discord Support Thread (https://discord.com/channels/837692625737613362/1159002778845315092)) 3. Update your packages: Make sure all your packages are up to date. You can update your @refinedev/core package using the following command:
yarn @refinedev/core@latest
yarn @refinedev/core@latest
(Source: Discord Support Thread (https://discord.com/channels/837692625737613362/1159002778845315092)) If none of these suggestions work, it might be a bug with Refine DevTools. In that case, I recommend creating an issue on the Refine GitHub repository (https://github.com/refinedev/refine/issues) to get help from the developers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai67d ago
<@379028227336830977> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua
ambitious-aqua67d ago
No description
ambitious-aqua
ambitious-aqua67d ago
@kapa.ai My packages are up to date, I have no conflicting ENV VARS, and the WebSocket handshake was successful. Same error.
kapa.ai
kapa.ai67d ago
Let me check the knowledge base for you. One moment! :books: ---------------------- I'm sorry to hear that you're still experiencing issues. It seems like you've tried all the available troubleshooting steps. At this point, it might be a bug with Refine DevTools. I recommend creating an issue on the Refine GitHub repository (https://github.com/refinedev/refine/issues). Please provide as much detail as possible, including the steps you've taken, any error messages, and your environment details. This will help the developers diagnose and fix the issue. In the meantime, you might want to consider using other tools or methods to inspect your queries and keys. I understand this isn't the ideal solution, but it might help you continue your work until the issue with DevTools is resolved. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai67d ago
<@379028227336830977> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua
ambitious-aqua67d ago
You did your best, bot. You did your best. I'm sure I missed some configuration. Just not sure where 😦
deep-jade
deep-jade64d ago
Are you running in dev mode it only runs in that I did get it working the other day
ambitious-aqua
ambitious-aqua64d ago
Yeah, I am Running refine dev Which should be dev mode
deep-jade
deep-jade64d ago
Looks like you are doing everything correct from what you’ve said. The dev tools appeared as a permanent absolute click button at the bottom of the page when I tried it Is there any errors in the console inspector
ambitious-aqua
ambitious-aqua63d ago
Thanks for helping me troubleshoot @Joe Gaffney -- there aren't any errors in the console at all
deep-jade
deep-jade62d ago
I can't really assit much further unless i see a code example. My guess would be its something to do with the provider ordering for the devTools
absent-sapphire
absent-sapphire56d ago
Hey @Millerbyte sorry for the issue, can you try to provide a minimal repro example for us to debug? Do you have any other Refine projects (or freshly generated ones) with devtools? Are they working properly? Do you have any specific configuration made in vite config or env variables? Regardless of the env variables refine dev command runs the devtools server along side with the project. But if the project is running with process.env.NODE_ENV something other than "development", <DevtoolsProvider /> will not initialize the connection with the devtools server. Hey @Joe Gaffney, was your issue caused by explicitly set NODE_ENV or was there any other things we should be aware of?
deep-jade
deep-jade56d ago
Hey @aliemir I never had the issue myself was just trying to help out. For me it worked fine in two different projects. One manually added from a refine template and one created from the cli.
absent-sapphire
absent-sapphire56d ago
Nice to hear that, thanks for the reply! Have a nice day!
deep-jade
deep-jade56d ago
@Millerbyte maybe try a fresh npm create refine-app@latest see if you have issues there. Then compare with your main project to debug.
More Posts
@ant-design/pro-table not workingI added ProTable from ant-desing. The problem is with some features like fix columns which is not woHow can i use query params for fetching?I have this code: `import { NumberField, Show, TextField } from "@refinedev/antd"; import { useShowFiltering with between in SupabaseI'm trying to useList while filtering a date column. The format of the date in this column is YYYY-Muse refetch result in next lineWhen I use refetch functiom from useCustom, the data variable is not updated inmediatly, what can I upload file using antDI need to upload a file with specific format. Exist any hook to do it?uselist paramsHow can I use useList with params?Issues with remix and useGo with remix router`I have the following error: Cannot update a component (`RouterProvider`) while rendering a differenCreating multiple entries with AntD's Create and useForm with SupabaseI have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, how to reset modal component state on close?this is in my modal component: ``` interface Props { modalProps: ModalProps formProps: FormPropRefine and Server ComponentsHello, is there any info regarding Refine and server components? I found this blog post: https://refrefine build --sourcemaprefine build --sourcemap misses mapping for src files the custom code and only includes nodemodulesREFINE GRAPHQL MOCK DATABASEHello, i have a question, does refine mock database in graphql resetted?why can't use underline as name?why can't use underline as name? { name: 'temp_products', How to use _ as name but use path - instead of _How to use _ as name but use path - instead of _How do I send with admin ID?``` import { AuthBindings } from '@refinedev/core' import nookies from 'nookies' const mockUsers = sidemenu elements namehow can I put a name differente than the resource name in the menu elementsuseList disableIs it possible to disable useList based on prop valueuseUpdateHow to update a resource using on button clickHow to current page to 1 on apply filtersHere is my getList code getList: async ({ resource, pagination, filters, meta }) => { consRefresh the page when closing the modal``` export const PointsModal = ({ type, point_id, member_id }: PointsModalProps) => { const {