Add Refine to an existing React project?

I'm wondering what the best way is to add Refine to an existing project. I tried adding the CLI, yarn add @refinedev/cli, and added a refine script to package.json. But when I run yarn refine, it fails with an error: TypeError: Cannot read properties of undefined (reading 'description') Any suggestions how to integrate refine into an existing app?
environmental-rose
environmental-rose423d ago
this error does not seems related to refine. can you double check your "undefined" controls please? like this {data?.description}
But when I run yarn refine, it fails with an error: TypeError: Cannot read properties of undefined (reading 'description')
But when I run yarn refine, it fails with an error: TypeError: Cannot read properties of undefined (reading 'description')
kapa.ai
kapa.ai423d ago
Sorry @nilsb7531, I am experiencing especially high traffic right now, please try again. :technologist:
rival-black
rival-black423d ago
TypeError: Cannot read properties of undefined (reading 'description') at Kr (frontend/node_modules/@refinedev/cli/dist/cli.js:19:1139) at Object.<anonymous> (frontend/node_modules/@refinedev/cli/dist/cli.js:19:1540) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:17:47 Thanks for the reply. This is the error stack. it seems to be in Refine? I can't tell exactly what it's looking at, it's compressed JS in the node_module
environmental-rose
environmental-rose423d ago
we will investigate the issue. meanwhile you can use refine without CLI but this error very cryptic. i'm not sure whats going on
rival-black
rival-black423d ago
Cool. one piece of data is that the only package i've "yarn added" is the CLI. Maybe just a dependency issue? My question is really what's the best way to adopt Refine into an existing React app. I was hoping installing the cli would then be smart and recognize an existing react app, and install the right additional packages on top but since i can't use the CLI, do you have any other tips on best way to adopt this into an existing React app? eg list of packages i have to directly install, things I should do besides adding a <Refine> component etc
fair-rose
fair-rose423d ago
Hello @nilsb7531, my friend will give you some context about CLI, meanwhile I can help you get set up Refine. Depends on your router, we have some examples (React Router, NextJS, Remix), from these examples you can review and integrate Refine. Even though these examples are purely refine apps, it's not so different other than having to define some things manually, which is cumbersome, we'll check what we can do to integrate into existing apps.
fair-rose
fair-rose423d ago
Here you can see our list of examples: https://github.com/refinedev/refine/tree/next/examples
GitHub
refine/examples at next · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/examples at next · refinedev/refine
rival-black
rival-black423d ago
cool! I'm using react-router. Specifically the package is react-router-dom i'm not on nextjs, it's vanilla react
fair-rose
fair-rose423d ago
Most of our examples are also with React Router since it's more straightforward! Do you have a UI package preference?
rival-black
rival-black423d ago
yeah, i'm using mantine. I set up a Refine+Mantine+react-router-6 project in a clean directory. So I have that example to look at too. but if there's a cleaner example in your github i could use that
fair-rose
fair-rose423d ago
We have this example with a single resource and some authentication, that wouldn't be so much different than what you have tho https://github.com/refinedev/refine/blob/next/examples/pixels/src/App.tsx
GitHub
refine/App.tsx at next · refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/App.tsx at next · refinedev/refine
rival-black
rival-black423d ago
ok cool Should things work with React v 17 and Node v16? Or is there a higher minimum?
fair-rose
fair-rose423d ago
That should be perfectly fine We've recently released v4, where we detached refine from any tightly-coupled router logic, so it's not so different than what you would do normally without refine. However, definitely we'll look how to improve integrate into existing apps, we could do something with codemod I think.
rival-black
rival-black423d ago
yeah, or honestly an MVP could be writing it into docs -- install these 4 packages, add a Refine component here, and you might want to add X or Y or Z , see the instructions here. but of course if you do it you have to maintain it, i realize it's work. but some basic playbook could be helpful
fair-rose
fair-rose423d ago
Definitely! We had been working hard on refine v4, that's a lot of examples, documentation to maintain on top of API changes, but you are right, we'll look into what we can do, since refine is headless
rival-black
rival-black423d ago
if my cli isn't working, am i going to be missing out on a lot of the value? I wouldn't be able to do the generators
fair-rose
fair-rose423d ago
Unfortunately, the CLI does not have such a feature. The CLI already has tools to speed up the development process of the Refine project, such as "create-resource", "swizzle", "check-updates", etc. see: https://refine.dev/docs/packages/documentation/cli/
CLI | refine
refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).
rival-black
rival-black423d ago
yes and congrats on that. i know it's a big effort but it looks awesome
fair-rose
fair-rose423d ago
I'll look into your issue, that should be fixable
rival-black
rival-black423d ago
cool, it would be great if you can figure it out. lmk if i can give you any more info or try anything
fair-rose
fair-rose423d ago
Could you be missing "version" key in your package.json ?
fair-rose
fair-rose423d ago
I think I managed to get same error
No description
fair-rose
fair-rose423d ago
When I delete "version" field from my package.json, got the same error
rival-black
rival-black423d ago
well, you're on to something... when i add version, the error changes: "Error: Project type not found"
fair-rose
fair-rose423d ago
GitHub
refine/index.ts at 25179c4ede7d9acb2e10891237e83c1cc56e4cf7 · refin...
Build your React-based CRUD applications, without constraints. - refine/index.ts at 25179c4ede7d9acb2e10891237e83c1cc56e4cf7 · refinedev/refine
rival-black
rival-black423d ago
ah ok
fair-rose
fair-rose423d ago
This is useful to understand which script to use, to start the server
rival-black
rival-black423d ago
ok so the issue is i bundle with parcel. it didn't start out as a CRA
fair-rose
fair-rose423d ago
I see, tbh, to run commands like create-resource, we don't really need that That's one thing we can improve
rival-black
rival-black423d ago
right, you do check for it at the moment so i can't do yarn refine create-resource for example can i stub it out? eg if i add react-scripts in dev environment or something
fair-rose
fair-rose423d ago
Yeah, temporary workaround would be to install react-scripts into your dependencies
rival-black
rival-black423d ago
i don't want to create more problems than i'm solving lol success Saved 469 new dependencies. when i add react-scripts
fair-rose
fair-rose423d ago
👊 Haha, that's ridicilous Perhaps, vite could be better into dev dependencies
rival-black
rival-black423d ago
at least i only added as a devDependency.
fair-rose
fair-rose423d ago
We'll look into that issue tomorrow for sure
fair-rose
fair-rose423d ago
GitHub
refine/index.ts at 25179c4ede7d9acb2e10891237e83c1cc56e4cf7 · refin...
Build your React-based CRUD applications, without constraints. - refine/index.ts at 25179c4ede7d9acb2e10891237e83c1cc56e4cf7 · refinedev/refine
rival-black
rival-black423d ago
cool. thanks so much for making a noob to refine feel welcome
fair-rose
fair-rose423d ago
Actually thank you for your suggestions, they will be nice improvements on top of what we have
rival-black
rival-black423d ago
anytime you need my malformed package.json and weird bundling just lmk. btw vite was a better choice, it added 14 dev dependencies
fair-rose
fair-rose423d ago
Hello @nilsb7531, I have a PR fixing the issues you mentioned yesterday, it will be released soon! https://github.com/refinedev/refine/pull/3976 Thanks for your contribution!
GitHub
fix(cli): wrong version output, added unknown project type, added p...
fixed: refine --version doesn't return refine cli's version. fixed: add error message if user tries to run script with unsupported package. fixed: added "unknown" project type as ...
rival-black
rival-black423d ago
you even added Parcel support for your one Parcel user! 🤣
More Posts
How to use Refine with JavascriptHello, What do I have to do to setup Refine to use JavaScript instead of typescript? I have checked Display success toast notificationI have created auth provider and i implemented login functionality .when I login it display toast uHow can I customize useRegister onSuccess error toast notification message?This is the refine V4 source code for useRegister hook. There is error handling, which by default thSupabase Set role upon signup or signInWithOAuthHi again everyone, How to set claim for role in Supabase when user signup with email and password orResource in useCustomMutation successNotification parameterHow do I access or pass a resource name into useCustomMutation? I use this hook to have a reorderingUse more than one Supabase Table on one PageHey lovely Refine Team, I cant find how to use Data of two Supabase Tables on one Page.how to adding custom type in option(queryOptions) select useCustom ?my use case is to overrides data from api via select options(queryOptions) but i dont know how to aTSconfig errorHey Everyone - I was wondering if anyone else was running into these errors as they were starting a I can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API can't connect my client id as it is asking for a string instead of client_id: process.env.REACT_API'm trying to create a projectHello everyone, I'm trying to create a project but it only comes with the header, how do I get the sError after upgrade to v4: Uncaught Error: No QueryClient set, use QueryClientProvider to set oneHello everything is fine? by the stack trace the error is in the method: useIsAuthenticated, I am usMultitenant URLsHi all! Anyone have more info on how to provide props to the nextjs-router in v4? We are multitenanUsing response data in errorNotification useFormHello, My REST API sends a JSON with explanation of what's wrong with the response when request failImplement Google Maps in a FormHello everyone, I am having trouble implementing google maps in a form where the user should fill soCannot invoke an object which is possibly 'undefined'Hi everyone, can anyone help me with this? I trying to integrate Access Control with Supabase and whhow to prefetch data using refineprefetch data before showing itemCan't change title of AuthPageI tried to change my login page title like this: <AuthPage type="login" title={<h2>WelcoUse modal form to populate an array in the current recordHello all, I need some help here. I'm trying to implement modal form in a project I'm working on witDefine customized Logo on default LoginpageHi, how can i set a logo on default Loginpage. (I am using refine V4)Error Can't resolve 'fs'Hello everyone, I'm facing an error integrating Casbin accessControlProvider here is the code for