yappiest-sapphire•2y ago

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?

41 Replies

flat-fuchsia•2y 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•2y ago

Sorry @nilsb7531, I am experiencing especially high traffic right now, please try again. :technologist:

yappiest-sapphire•2y 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

flat-fuchsia•2y 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

yappiest-sapphire•2y 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

genetic-orange•2y 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.

genetic-orange•2y 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

yappiest-sapphire•2y ago

cool! I'm using react-router. Specifically the package is react-router-dom i'm not on nextjs, it's vanilla react

genetic-orange•2y ago

Most of our examples are also with React Router since it's more straightforward! Do you have a UI package preference?

yappiest-sapphire•2y 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

genetic-orange•2y 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

yappiest-sapphire•2y ago

ok cool Should things work with React v 17 and Node v16? Or is there a higher minimum?

genetic-orange•2y 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.

yappiest-sapphire•2y 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

genetic-orange•2y 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