adverse-sapphire•7mo ago

Remix SPA mode issues when importing Refine

Hello guys! Im trying to use Refine on a project where the base framework is Remix on SPA mode. For some reason, vite is yelling at me because it thinks im wrongly importing Refine and to me it all looks OK like im following the getting started guide. Heres the relevant code snippets

// root.tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "@remix-run/react"

import stylesheet from "./tailwind.css?url"
import { LinksFunction } from "@remix-run/node"

// Supports weights 200-800
import "@fontsource-variable/manrope"
import { Refine } from "@refinedev/core"
import routerProvider from "@refinedev/remix-router";
import { authProvider } from "./data/auth-provider"

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet }
  // { rel: "stylesheet", href: manropeStylesheet },
]

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Refine
          authProvider={authProvider}
          routerProvider={routerProvider}
        >
          {children}
        </Refine>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />
}

export function HydrateFallback() {
  return <p>Loading...</p>
}

// root.tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "@remix-run/react"

import stylesheet from "./tailwind.css?url"
import { LinksFunction } from "@remix-run/node"

// Supports weights 200-800
import "@fontsource-variable/manrope"
import { Refine } from "@refinedev/core"
import routerProvider from "@refinedev/remix-router";
import { authProvider } from "./data/auth-provider"

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet }
  // { rel: "stylesheet", href: manropeStylesheet },
]

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Refine
          authProvider={authProvider}
          routerProvider={routerProvider}
        >
          {children}
        </Refine>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}

export default function App() {
  return <Outlet />
}

export function HydrateFallback() {
  return <p>Loading...</p>
}

My versions

  "@refinedev/cli": "^2.16.1",
    "@refinedev/core": "^4.47.2",
    "@refinedev/remix-router": "^3.0.0",
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",

  "@refinedev/cli": "^2.16.1",
    "@refinedev/core": "^4.47.2",
    "@refinedev/remix-router": "^3.0.0",
    "@remix-run/node": "^2.8.0",
    "@remix-run/react": "^2.8.0",

Error:

 [vite] Named export 'Refine' not found. The requested module '@refinedev/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@refinedev/core';
const {Refine} = pkg;

 [vite] Named export 'Refine' not found. The requested module '@refinedev/core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@refinedev/core';
const {Refine} = pkg;

45 Replies

kapa.ai•7mo ago

Hi @Juan. 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, it seems like you're encountering an issue with Vite when trying to use Refine with Remix in SPA mode. However, the extracts provided do not contain specific information about this issue. One of the extracts does mention a similar issue where a user was trying to use Remix in Vite support experimental mode and encountered an error when importing @refinedev/remix-router. The user reported the issue on GitHub, but the extract does not provide a solution or workaround for the problem. Here is the relevant extract:

Github Issue (closed): [FEAT] Vite support on Remix experimental > Original post Describe the bug Trying to use remix in vite support experimental link (https://remix.run/docs/en/main/future/vite) and refine giving issue on [vite] Error when evaluating SSR module /app/root.tsx: failed to import &quot;@refinedev/remix-router&quot;

Unfortunately, without more specific information or error messages, it's difficult to provide a definitive solution. I would recommend checking the official Refine documentation (https://refine.dev/docs/getting-started/installation) and the Remix documentation (https://remix.run/docs/en/v17) for any potential discrepancies in your setup. If the issue persists, consider reaching out to the Refine community or opening an issue on the Refine GitHub page (https://github.com/pankod/refine/issues) for more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1006845905388970045> kapa.ai is still learning and improving, please let us know how it did by reacting below

adverse-sapphire•7mo ago

@kapa.ai this is the erro [vite] Named export 'Refine' not found. The requested module '@refinedev/core' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from '@refinedev/core'; const {Refine} = pkg;

kapa.ai•7mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing is due to the way Vite handles CommonJS modules. Vite expects ESModules, and when it encounters a CommonJS module, it may not correctly handle all named exports. In your case, it seems that Vite is having trouble with the named export Refine from the @refinedev/core package. The error message suggests a workaround: instead of using a named import, you can import the entire module and then destructure the Refine export from it. Here's how you can do it:

import pkg from '@refinedev/core';
const { Refine } = pkg;

import pkg from '@refinedev/core';
const { Refine } = pkg;

This will import the entire @refinedev/core module as pkg, and then extract Refine from it. However, this is a workaround and might not be the best solution for your project. It's worth noting that there have been similar issues reported with Vite and Refine, as seen in the extracts (https://github.com/refinedev/refine/issues/1122) provided. If this workaround doesn't solve your issue, or if you prefer not to use it, I would recommend reaching out to the Refine community or opening an issue on the Refine GitHub page (https://github.com/pankod/refine/issues) for more targeted assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

<@1006845905388970045> kapa.ai is still learning and improving, please let us know how it did by reacting below

foreign-sapphire•7mo ago

Hello @Juan, We didn't tested yet with Remix Vite. I don't think the issue is related to Refine, but I've added this issue to our backlog. when we find a solution I'll share it with you

adverse-sapphire•7mo ago

heres a codesanbox if it helps https://codesandbox.io/p/devbox/vytw73?migrateFrom=3rxrwp any idea where this could be? if i can debug maybe i can do a pr if this is not a priority for you guys

foreign-sapphire•7mo ago

thanks. It would be great We would be very happy 🙌 Vite and Remix are very important for us, but there are ongoing works at the moment. I'd have to talk to the team first to give an exact time. of course all PR's are welcome and we would be glad

fascinating-indigo•7mo ago

Hello, I will be trying to dig into this. juan is my dev and refine is important to me as well.

foreign-sapphire•7mo ago

thanks 🙌

fascinating-indigo•7mo ago

yup, my project is using this to save time and i have the bandwidth to do it (plus deadlines :P) @Alican Erdurmaz im cloning the refine repo, but the 1st thing that immediately stands out is no Refine component or js class exists? import { Refine } from "@refinedev/core";

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Refine

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Refine

...

foreign-sapphire•7mo ago

I'm sorry. I don't quite understand your question

fascinating-indigo•7mo ago

I cannot find where the Refine component is defined at, since it seems to be a react component

foreign-sapphire•7mo ago

<Refine> component is here https://github.com/refinedev/refine/blob/master/packages/core/src/components/containers/refine/index.tsx#L188

fascinating-indigo•7mo ago

thanks @Alican Erdurmaz why is refine being pre-bundled? from my exp that never works out well to be preminified then be run through a bundler again ive had a lot of issues in the past with that type of build process to the point I had to fork just so the bundler could see it node-js style it looks like all your bundling is targeting the browser as if the user is going to load it off a cdn vs be bundled... @Alican Erdurmaz can you give any insight on this or does another refine dev need to give input? @Alican Erdurmaz digging into this more the crux of the issue is the fact your minifying the outputs and the var names dont match. this works in vite due to sourcemaps i assume based on the vite template. but with remix SPA mode... it is calling a node server script which tries to import Refine, and 404's b/c everythiings minified spa doesnt use the bundler but is effectively evaling the pages