SolidJS•13mo ago

Struggling to get FileRoutes working

Trying to get the FileRouter working in a fresh pnpm create solid https://github.com/metruzanca/solid-fileroutes-not-working Keep getting hydration error in the console

GitHub

GitHub - metruzanca/solid-fileroutes-not-working: solid-start-latest

solid-start-latest. Contribute to metruzanca/solid-fileroutes-not-working development by creating an account on GitHub.

25 Replies

MetruOP•13mo ago

Tried following this: https://start.solidjs.com/core-concepts/routing made changes to the app.tsx and routes/index.tsx files

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

Sharky•13mo ago

Got the same issue with a new fresh install of solid with vite template 🤔 Also the new issue of Error: Should be provided by compiler in routes.js:1

ChrisThornham•13mo ago

@Sharky I was getting the same “should be provided by compiler” error in two projects when I ran ‘npm start’. I did a quick rebuild from scratch last night and it appears to have fixed it.

Sharky•13mo ago

Oh thanks! I will do! I found out that the Router got a new big update and a new documentation https://github.com/solidjs/solid-router#getting-started that will help for the mean time - sadly no FileRouter s ofar 🙂

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - GitHub - solidjs/solid-router: A universal router for Solid inspired by Ember and React Router

MetruOP•13mo ago

@Sharky @ChrisThornham So I ended up figuring out that you need to setup your router like this

// app.tsx
// @refresh reload
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start"
import { Suspense } from "solid-js"
import "./app.css"

export default function App() {
  return (
    <Router
      root={(props) => (
        <Suspense>{props.children}</Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

// app.tsx
// @refresh reload
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start"
import { Suspense } from "solid-js"
import "./app.css"

export default function App() {
  return (
    <Router
      root={(props) => (
        <Suspense>{props.children}</Suspense>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

The docs are wrong and are missing this part If you do pnpm create solid and use the bare template, it doesn't have this. If you use basic its got the FileRouter setup. If you use the with-auth example you'll also get a good example of how to use the new form actions and cache functions

ChrisThornham•13mo ago

@Metru thank you! I'll look into this. That might do it.

MetruOP•13mo ago

Lemme know if you can't get it working. I just migrated an app to the new beta and started a new one using it too.

quyduc•12mo ago

Hi. I have been running into the same problem and have tried this solution but still didn't work for me. Is there any other thing that I need to do to get the FileRoutes working?

MetruOP•12mo ago

Can you share your code?

quyduc•12mo ago

Here is my folder structure

quyduc•12mo ago

// App.tsx
// @refresh reload

import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import "./App.css"

export default function App() {
  return (
    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>
  );
}

// App.tsx
// @refresh reload

import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import "./App.css"

export default function App() {
  return (
    <Router root={(props) => <Suspense>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>
  );
}

// routes/index.tsx
export default function Index() {
  return <div><h1>/</h1></div>;
}

// routes/index.tsx
export default function Index() {
  return <div><h1>/</h1></div>;
}

quyduc•12mo ago

Here is my error on the console

MetruOP•12mo ago

How did you initialize the project? Because your file structure doesn't look like a solid-start project

MetruOP•12mo ago

This is a solid-start app

quyduc•12mo ago

I follow this guide

MetruOP•12mo ago

This is how you make a Solid app. Thats just client. FileRouting is a solidstart feature

quyduc•12mo ago

oh ic ic

MetruOP•12mo ago

https://start.solidjs.com/getting-started/project-setup npm init solid or npm create solid

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

quyduc•12mo ago

So if I want to stick with Solid, it means I need to use solid-router right?

MetruOP•12mo ago

You can use the new "@solidjs/router", you just can't use the FileRouter since thats imported from "@solidjs/start"

quyduc•12mo ago

I see. Thank you very much Metru. Have a nice day

MetruOP•12mo ago

You're very welcome. Lemme know if you run into any other hiccups and I'll see if I can help

quyduc•12mo ago

By the way, just curious, what UI library you would recommend me to use. I'm new to SolidJS so not sure which one to choose to build my app.

MetruOP•12mo ago

https://daisyui.com & https://kobalte.dev kobalte is similar to Radix in that it gives you fine grain control Daisy requires you to use tailwind though. Kobalte does not, but plays very well with tailwind. Kobalte is unstyled by default. Daisy comes with style defaults You can easily use both together.

Gaming

Programming

Struggling to get FileRoutes working

Did you find this page helpful?