Import error with Outlet
This is the code I apply to my routes to protect them from users who are not logged in, and I get this error in the browser console, I don't understand why I get this error if I followed the documentation.
This is mi app.jsx
import { Outlet, useNavigate } from "@solidjs/router";
export default function ProtectedRoute({
canActivate,
redirectPath = "/auth/login",
}) {
const navigate = useNavigate();
if (!canActivate) {
navigate(redirectPath, { replace: true });
return null;
}
return <Outlet />;
}import { Outlet, useNavigate } from "@solidjs/router";
export default function ProtectedRoute({
canActivate,
redirectPath = "/auth/login",
}) {
const navigate = useNavigate();
if (!canActivate) {
navigate(redirectPath, { replace: true });
return null;
}
return <Outlet />;
} Uncaught SyntaxError: The requested module '/_build/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'Outlet' (at CheckAuth.jsx:1:10) Uncaught SyntaxError: The requested module '/_build/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'Outlet' (at CheckAuth.jsx:1:10)This is mi app.jsx
export default function App() {
return (
<Router
root={(props) => (
<>
<div>
<Suspense>{props.children}</Suspense>
</div>
</>
)}
>
<Route element={<ProtectedRoute canActivate={true}/>}>
<FileRoutes path="/" element={<Home />} />
</Route>
<FileRoutes path="/auth/login" element={<Login />} />
</Router>
);
} export default function App() {
return (
<Router
root={(props) => (
<>
<div>
<Suspense>{props.children}</Suspense>
</div>
</>
)}
>
<Route element={<ProtectedRoute canActivate={true}/>}>
<FileRoutes path="/" element={<Home />} />
</Route>
<FileRoutes path="/auth/login" element={<Login />} />
</Router>
);
} 
