refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://refine.dev
MIT License
25.92k stars 1.96k forks source link

[BUG] NextJs 14 and latest versions of package.json: dataProvider is not a function #6036

Closed vitali-bc closed 1 week ago

vitali-bc commented 2 weeks ago

Describe the bug

Hi guys, seems very strange... Basically I'm usine nextjs headless version with refine and updated all packages.json to latest versions (photo 1) When run dev it shows me error: Screenshot 2024-06-11 alle 21 46 19

Screenshot 2024-06-11 alle 21 48 49

Steps To Reproduce

  1. run ncu -u to update all packages
  2. npm i to install
  3. npm run dev

Expected behavior

All must working correctly

Packages

refine/core refine/simple-rest

Additional Context

No response

aliemir commented 2 weeks ago

Hey @vitali-bc, just created a new Refine + Next.js project using npm create refine-app@latest:

We have src/providers/data-provider/index.ts file which exports the dataProvider, it seems like your import is also coming from the same location. Exported dataProvider is not a function but an object (a data provider instance).

We also export a dataProvider from @refinedev/simple-rest (also in other data provider packages) which is a function and can be used like the way you do:

import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

export function RootLayout() {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
    >
       ...
    </Refine>
  }
}

In your case, updating the import or updating the usage will resolve the issue.

If this happened after freshly created Refine project, can you share your choices so we can track down the issue πŸ™

vitali-bc commented 2 weeks ago

Yes it works, but problem persists when you are updating all packages to latest versions. Try to, thanks

Il giorno mer 12 giu 2024 alle 12:47 Ali Emir Şen @.***> ha scritto:

Hey @vitali-bc https://github.com/vitali-bc, just created a new Refine

  • Next.js project using npm create @.***:

We have src/providers/data-provider/index.ts file which exports the dataProvider, it seems like your import is also coming from the same location. Exported dataProvider is not a function but an object (a data provider instance).

We also export a dataProvider from @refinedev/simple-rest (also in other data provider packages) which is a function and can be used like the way you do:

import { Refine } from @./core";import dataProvider from @./simple-rest"; export function RootLayout() { return ( <Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")}

... }}

In your case, updating the import or updating the usage will resolve the issue.

If this happened after freshly created Refine project, can you share your choices so we can track down the issue πŸ™

β€” Reply to this email directly, view it on GitHub https://github.com/refinedev/refine/issues/6036#issuecomment-2162693896, or unsubscribe https://github.com/notifications/unsubscribe-auth/BJDKOYTGI2GDOPG2R2KXP4DZHARLPAVCNFSM6AAAAABJE7TITSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRSGY4TGOBZGY . You are receiving this because you were mentioned.Message ID: @.***>

aliemir commented 2 weeks ago

Ciao @vitali-bc! I'm having hard time keeping up with the issue here. Does this pop up right after you create the project or does it pop up after you update the dependencies in a currently working project? Does this line added/edited by you or was it like that all along? I'll be happy to help if you can provide a bit more info πŸš€