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:
// 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;
