metropolitan-bronze•5mo 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•5mo 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•5mo ago

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

metropolitan-bronze•5mo 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•5mo 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•5mo ago

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

secure-lavender•5mo 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

metropolitan-bronze•5mo 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

secure-lavender•5mo 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

deep-jade•5mo ago

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

secure-lavender•5mo ago

thanks 🙌

deep-jade•5mo 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

...

secure-lavender•5mo ago

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

deep-jade•5mo ago

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

secure-lavender•5mo ago

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

deep-jade•5mo 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

secure-lavender•5mo ago

Hello again @pcfreak30, I discuss with the core team and our backlog is crowded at the moment and I can't give you an exact date when we can be in full focus on this issue. We hope someone from the community will solve this problem. Can I ask you to move the errors you find to the github issue? https://github.com/refinedev/refine/issues/5202

absent-sapphire•5mo ago

Hey @pcfreak30, sorry for the issues. About the remix + vite and spa mode, I'm guessing this might be happening because the esm exports are interpreted as cjs by the bundler (in this case vite) due to the mismatching file extension (our esm bundles target dist/esm/index.js) or lack of package.json#exports in @refinedev/core or other dependencies of it. I did a small experiment in my local and manually updated node_modules/@refinedev and then successfully started the project. (There are couple of issues related to dependencies but all can be fixed) But I can say that it's not directly related with the minification. We can discuss further about the possible updates and fixes for the ESM builds in github. About the minification in the build step, I think it makes sense to disable that and probably doesn't have any upsides with minification anyways 😅 Can you open an issue on github and let's discuss further for these? We'd love to see your contribution via a PR or via recommendations 🙏

deep-jade•5mo ago

i made progress with this on my end, by forking then using pkgnow to load from git in the mono repo https://github.com/LumeWeb/refine/tree/remix

GitHub

GitHub - LumeWeb/refine at remix

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility. - GitHub - LumeWeb/refine at remix

deep-jade•5mo ago

lots of hacks but the big change was disabling minify, then i had to fix some imports (lodash to use .js). then i had to change remic to use cjs in the server script serverModuleFormat i got things far enough where it builds correctly, but the live server mode still crashes with esm issues in browser but a big important part is the fact that since spa is basically a node script to emulate a 1 time SSR... the minify must be off for it to properly import Refine, b/c node doesnt read sourcemaps so you have a minify issue and a classic esm/cjs issue

absent-sapphire•5mo ago

I also did the same updates on imports lodash-es and papaparse, build succeeded but dev server kept erroring out and it was resolved with the package.json#exports I added something like this:

"exports": {
    ".": {
      "import": "./dist/esm/index.mjs",
      "require": "./dist/index.js",
    },
},

"exports": {
    ".": {
      "import": "./dist/esm/index.mjs",
      "require": "./dist/index.js",
    },
},

and also renamed the esm/index.js to esm/index.mjs and then it started working just fine

deep-jade•5mo ago

soumds like we found the same paths :P.

absent-sapphire•5mo ago

I guess it's required to use exports since node doesn't check for "module" 😅

deep-jade•5mo ago

where did you add this

absent-sapphire•5mo ago

Updated the package.json of the @refinedev/core To make the proper change in the repo, we probably need to configure tsup.config.ts to output with mjs extension for esm 😅

deep-jade•5mo ago

Given the complexity of your mono repo and how much this impacts, any issue would be a bulletpoint list of changes as they arent hard, just prob need testing i told me dev fixing this wouldnt be hard, just take a lot of digging

absent-sapphire•5mo ago

btw, while testing in the monorepo also had issue with the vite version (v5 is required for remix vite) since its hoisted and widely used with @4 but didn't had any trouble updating to @5 in my local. I'm not sure if you also encountered this issue in your fork 🤔

deep-jade•5mo ago

no i havent tried upgrading vite yet i do know that refine targets an older remix your commamd wrappers assume remix-serve exists i dug into a lot to wtf was being done lol felt like a lot of black magic

absent-sapphire•5mo ago

Yeah, unfortunately I also noticed that too, commands needs to be replaced for remix-vite 😅

deep-jade•5mo ago

what config did you change in tsup for the mjs?

absent-sapphire•5mo ago

I only did this change manually for testing but I think outExtension can do the trick or removing --legacy-output will convert to cjs and mjs

deep-jade•5mo ago

kk. im tresting some of this on my end @aliemir that worked. now...

[vite] Internal server error: Named export 'getXRay' not found. The requested module '@refinedev/devtools-internal' 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/devtools-internal';
const { getXRay } = pkg;

[vite] Internal server error: Named export 'getXRay' not found. The requested module '@refinedev/devtools-internal' 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/devtools-internal';
const { getXRay } = pkg;

have to fix all pkg you import from worked with esm in vite, no serverModuleFormat change in remix

absent-sapphire•5mo ago

For the @refinedev/core its also required to do the same for @refinedev/devtools-shared and @refinedev/devtools-internal. I've been there, but forgot to mention 😅

deep-jade•5mo ago

yup i know i already solved some of it but i tackle 1 issue at a time when debugging so was seeing how far it got

6:42:37 AM [vite] Error when evaluating SSR module /app/root.tsx: failed to import "@refinedev/remix-router"
|- node_modules/@refinedev/remix-router/dist/esm/index.js:2
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)

6:42:37 AM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/root.tsx"

6:42:37 AM [vite] Error when evaluating SSR module /app/root.tsx: failed to import "@refinedev/remix-router"
|- node_modules/@refinedev/remix-router/dist/esm/index.js:2
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)

6:42:37 AM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/root.tsx"

|- node_modules/@refinedev/remix-router/dist/esm/index.js:2
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)

6:42:37 AM [vite] Internal server error: Cannot use import statement outside a module
      at Object.compileFunction (node:vm:360:18)
      at wrapSafe (node:internal/modules/cjs/loader:1049:15)
      at Module._compile (node:internal/modules/cjs/loader:1084:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
      at Module.load (node:internal/modules/cjs/loader:998:32)
      at Module._load (node:internal/modules/cjs/loader:839:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
      at async Promise.all (index 0)
      at async ESMLoader.import (node:internal/modules/esm/loader:541:24)

|- node_modules/@refinedev/remix-router/dist/esm/index.js:2
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)

6:42:37 AM [vite] Internal server error: Cannot use import statement outside a module
      at Object.compileFunction (node:vm:360:18)
      at wrapSafe (node:internal/modules/cjs/loader:1049:15)
      at Module._compile (node:internal/modules/cjs/loader:1084:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
      at Module.load (node:internal/modules/cjs/loader:998:32)
      at Module._load (node:internal/modules/cjs/loader:839:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
      at async Promise.all (index 0)
      at async ESMLoader.import (node:internal/modules/esm/loader:541:24)

@aliemir

absent-sapphire•5mo ago

I think this is related to the file extension

deep-jade•5mo ago

yras trying the same things on it @aliemir its working btw. checked my lock, im on "vite": "^5.1.0", @aliemir im creating an issue for this to summarize all changes that need to be made

absent-sapphire•5mo ago

Thank you @pcfreak30, I'll also review the issue if we need anything to add 🚀

deep-jade•5mo ago

https://github.com/refinedev/refine/issues/5734

GitHub

[BUG] Remix (SPA) Support · Issue #5734 · refinedev/refine

Describe the bug The current build process of refine packages makes it incompatible with Remix SPA, and possibly? more. This has been tested on Remix 2.8.0. The following steps need to be taken: Di...

deep-jade•5mo ago

is there any potential timeline for getting this fixed or is the team bandwidth on other priorities?

absent-sapphire•5mo ago

We're releasing in monthly cycles and even if there's an update on this issue it will be released at the first week of April. I cannot make any promises if we can prioritize this to be worked on and included in the April releases but we'd love to help, review and provide feedback and guidance when needed if you can prepare a PR for it 🙏 Even if it's not a fully complete PR we can work on minor stuff, bugs etc. to prepare it for the release. 🚀 Are you interested in creating such PR?

deep-jade•5mo ago

I feel this is too big for me to take on given its about repo management, im an outsider on the project, and literally all build management needs changes. this needs to be handled internally IMHO it just will mean i dont need hacks in a fork to keep stuff working once in Overall i just am looking to know when I can expect movement since all FOSS projects have their own priorities, and VC backed ones even more so.

absent-sapphire•5mo ago

We've recently worked on improving the app-router support on our Next.js integration and we're not going to let the remix integration be outdated 😅 We're planning on making some changes to the type declarations and how we handle them which touches the similar files with this issue and probably need to get this done right after that. We're targeting for this to be fixed with the next release or the one after. I understand your concerns so no pressure here 😅 Feel free to get in touch if anything new comes up. I'll try to keep here updated when we have any about the issue.

deep-jade•5mo ago

so end of q2 in the worst case then.

deep-jade•5mo ago

@aliemir please see https://github.com/refinedev/refine/pull/5765#issuecomment-2024330161

GitHub

refactor(packages): update package.json configuration with proper E...

Updated package configuration for ESM and CJS Updated tsup config to bundle with proper extensions Removed unused iife bundle Added @tabler/icons-react CJS replacement plugin Replaced @refinedev/li...

deep-jade•4mo ago

@aliemir

absent-sapphire•4mo ago

@pcfreak30 Replied with a comment 🚀