Outlet issue on routes

Hey everyone, I'm struggling at the moment with setting up my routes... I have the following in app.tsx:

  return (
    <>
      <Router
        root={(props) => (
          <>
            <ColorModeScript storageType={storageManager.type} />
            <ColorModeProvider storageManager={storageManager}>
              <AuthProvider>
                <AuthGuard>{props.children}</AuthGuard>
              </AuthProvider>
            </ColorModeProvider>
          </>
        )}
      >
        <Route path="/" component={AuthLayout}>
          <Route path={["/", "/flags"]} component={Flags} />
          <Route path="/flags/:id" component={FlagIndex} />
          <Route path="/settings" component={Settings} />
        </Route>
        <Route path="/auth" component={DefaultLayout}>
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={Signup} />
        </Route>
      </Router>
    </>
  )
}

  return (
    <>
      <Router
        root={(props) => (
          <>
            <ColorModeScript storageType={storageManager.type} />
            <ColorModeProvider storageManager={storageManager}>
              <AuthProvider>
                <AuthGuard>{props.children}</AuthGuard>
              </AuthProvider>
            </ColorModeProvider>
          </>
        )}
      >
        <Route path="/" component={AuthLayout}>
          <Route path={["/", "/flags"]} component={Flags} />
          <Route path="/flags/:id" component={FlagIndex} />
          <Route path="/settings" component={Settings} />
        </Route>
        <Route path="/auth" component={DefaultLayout}>
          <Route path="/signin" component={SignIn} />
          <Route path="/signup" component={Signup} />
        </Route>
      </Router>
    </>
  )
}

I'm not sure if I'm setting up the routes here correctly, but I keep getting an error when it comes to no exported outlet. In my /flags/[:id] route i have a useParam() and this is whats throwing the error. Is there a reason why I keep getting this error. Nothing renders.

Uncaught SyntaxError: The requested module '/_build/@fs/C:/Users/anonymous/Projects/anonmymous/node_modules/.pnpm/@solidjs+router@0.14.1_solid-js@1.8.17/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'Outlet' (at router.tsx:2:22)

Uncaught SyntaxError: The requested module '/_build/@fs/C:/Users/anonymous/Projects/anonmymous/node_modules/.pnpm/@solidjs+router@0.14.1_solid-js@1.8.17/node_modules/@solidjs/router/dist/index.jsx' does not provide an export named 'Outlet' (at router.tsx:2:22)

3 Replies

Madaxen86•2mo ago

Can't see what's wrong. I created stackblitz with the router 0.14.1 and works as expected -> click on test / ... https://stackblitz.com/edit/github-grada5-waknkt?file=src%2Fapp.tsx Can you provide a stackblitz which recreates the issue

mdynnl•2mo ago

you probably actually have Outlet imported from @solidjs/router which was removed in https://github.com/solidjs/solid-router/pull/312 the replacement for that is just a mere props.children like you would normally write a Wrapper Component

Casacobra•2mo ago

Thanks guys, I fixed it I was basically using an older version of solid-start 😄

Gaming

Programming

Outlet issue on routes