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
My versions
Error:
![No description](https://cdn.answeroverflow.com/1215292738887753748/Screenshot_2024-03-07_at_14.30.55.png)
45 Replies
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 "@refinedev/remix-router"
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:
----------------------<@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;
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:
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:
----------------------<@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";
...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
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