SolidJS•4mo ago

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.

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>
    );
}

5 Replies

REEEEE•4mo ago

Outlet does not exist anymore https://github.com/solidjs/solid-router/tree/main?tab=readme-ov-file#outlet-routes-useroutes Could you show which documentation you were looking at?

tom1sl•4mo ago

thanks, this is https://docs.solidjs.com/guides/routing-and-navigation#the-outlet--component

REEEEE•4mo ago

Seems like a possible issue with the docs. Take a look at the readme for solid-router for more updated information. I have brought up the issue in #docs

tom1sl•4mo ago

Okay, I'm going to look there, it seems that this documentation is not updated, thank you very much for the help, my friend.

Mahmood•4mo ago

This is about Migration https://docs.solidjs.com/routing/migration

Gaming

Programming

Import error with Outlet