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;
No description
K
kapa.ai49d 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 &amp;quot;@refinedev/remix-router&amp;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: ----------------------
K
kapa.ai49d ago
<@1006845905388970045> kapa.ai is still learning and improving, please let us know how it did by reacting below
O
other-emerald49d 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;
K
kapa.ai49d 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: ----------------------
K
kapa.ai49d ago
<@1006845905388970045> kapa.ai is still learning and improving, please let us know how it did by reacting below
L
like-gold49d 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
O
other-emerald49d 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
L
like-gold49d 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
L
like-gold49d ago
Hello, I will be trying to dig into this. juan is my dev and refine is important to me as well.
L
like-gold49d ago
thanks 🙌
L
like-gold49d 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
...
L
like-gold49d ago
I'm sorry. I don't quite understand your question
L
like-gold49d ago
I cannot find where the Refine component is defined at, since it seems to be a react component
L
like-gold49d 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
L
like-gold48d 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
P
passive-yellow48d 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 🙏
L
like-gold48d 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
L
like-gold48d 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
P
passive-yellow48d 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
L
like-gold48d ago
soumds like we found the same paths :P.
P
passive-yellow48d ago
I guess it's required to use exports since node doesn't check for "module" 😅
L
like-gold48d ago
where did you add this
P
passive-yellow48d 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 😅
L
like-gold48d 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
P
passive-yellow48d 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 🤔
L
like-gold48d 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
P
passive-yellow48d ago
Yeah, unfortunately I also noticed that too, commands needs to be replaced for remix-vite 😅
L
like-gold48d ago
what config did you change in tsup for the mjs?
P
passive-yellow48d 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
L
like-gold48d 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
P
passive-yellow48d 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 😅
L
like-gold48d 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
P
passive-yellow48d ago
I think this is related to the file extension
L
like-gold48d 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
P
passive-yellow48d ago
Thank you @pcfreak30, I'll also review the issue if we need anything to add 🚀
L
like-gold48d ago
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...
L
like-gold48d ago
is there any potential timeline for getting this fixed or is the team bandwidth on other priorities?
P
passive-yellow48d 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?
L
like-gold48d 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.
P
passive-yellow48d 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.
L
like-gold48d ago
so end of q2 in the worst case then.
L
like-gold28d ago
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...
L
like-gold23d ago
@aliemir
P
passive-yellow21d ago
@pcfreak30 Replied with a comment 🚀
More Posts
Inferencer fail to detect relationsi am making two pages that will have relations between them but antd inferencer fail to detect relatModifying data on an edit page before updatingI have a field where the user enters a phone number that's formatted into an object using "antd-phonHow do I sent REST request with useForm from refinedev/antdIn meta property there is only attribute for gqlMutation and gqlQueryWrong datetime format for AntD DatePickerI'm using AntD DatePicker component and when I'm on my edit page and want to fill the form with inituseshowhi how I can refetch the data or to have real time update, it means I want when I do changes on the Icon props@kapa.ai Hi there am using my own svgs in my side bar and I want to change there color on click ...NextJS persistency TanStack + Mantine Table sortingHey, I have made a Table with TanStack + Mantine Table and now i want to implement sorting functionkeyboard shortcutsi went thru the docs but i couldnt find anything regarding keyboard shortcuts. how can i implement tuseList or operator is not workingI have this query for global search but the or operator is returning nothing. I'm using supabase as useForm get the property datahi in Edit page I want to get the property data, in the code I provide, I get all the properties in I am able to do this with **useEffectI am able to do this with **useEffect**, but every hot reload breaks the state. Not sure why. A soluWith **useList**, why was **onSuccess**With **useList**, why was **onSuccess** deprecated?How the subscription works when enabling Live provider for graphql?Hi all, I would like to understand how Refine triggers subscriptions for instance in the CRM examplhow to hide some fields depending on one other?in the edit field i can hide the field using watch exported from useForm but i also need to hide thestop getOne api call on edit pagestop getOne api call on edit page antdNesting routesHow can I nest routes on Navbar? Let's say I have: InventoryProducts and InventoryMaterials resourceAnt Design useTable problemHello, here is my code ``` import { List, useTable } from '@refinedev/antd'; import { Table } from How Can I change the date format?``` <LocalizationProvider dateAdapter={AdapterDayjs}> <Grid container spacing={2}>Save button click but no trigger actionI have this part of component ```import React, { useCallback } from "react"; import { useTranslate, Where is the mantine option when using the CLI or refine.new?When trying to create a new NextJS Project either with the CLI or the website, mantine is not provid