Router brakes css

Code that works:

...(index.tsx)
const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

render(() => <App />, root);
... (app.tsx)
function App() {
  return (
    <Router root={MainLayout}>

      <Route path="/" component={TestComponent} />
      <Route path="/cart" component={TestComponent} />
    </Router>
  );
}
function TestComponent(props: any){
  let name = props.name ? props.name : 'Component'
  console.log(name)
  return (
<main class="mb-auto h-10 bg-green-500">{name}</main>

  )
}
...
// Code that breaks
... index2.tsx

const elem: Element = document.getElementById("root")

render(() => (
  <Router root={MainLayout}>
    <Route path="/" component={MainLayout}>

      <Route path="/cart" component={Cart} />
      <Route path="/" component={TestComponent} />
      <Route path="*404" component={()=>(<TestComponent name='not found'/>)} />
    </Route>
  </Router>
), elem);


  function Cart() {
    return (
      <div class="p-4 grid">
  
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      </div>
    )
  }

...(index.tsx)
const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

render(() => <App />, root);
... (app.tsx)
function App() {
  return (
    <Router root={MainLayout}>

      <Route path="/" component={TestComponent} />
      <Route path="/cart" component={TestComponent} />
    </Router>
  );
}
function TestComponent(props: any){
  let name = props.name ? props.name : 'Component'
  console.log(name)
  return (
<main class="mb-auto h-10 bg-green-500">{name}</main>

  )
}
...
// Code that breaks
... index2.tsx

const elem: Element = document.getElementById("root")

render(() => (
  <Router root={MainLayout}>
    <Route path="/" component={MainLayout}>

      <Route path="/cart" component={Cart} />
      <Route path="/" component={TestComponent} />
      <Route path="*404" component={()=>(<TestComponent name='not found'/>)} />
    </Route>
  </Router>
), elem);


  function Cart() {
    return (
      <div class="p-4 grid">
  
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      </div>
    )
  }

cc @Brendonovich

6 Replies

☼𝕯𝖆𝖞𝖑𝖎𝖌𝖍𝖙☾•4mo ago

trying to use nested routes https://github.com/solidjs/solid-router?tab=readme-ov-file#nested-routes

GitHub

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

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

☼𝕯𝖆𝖞𝖑𝖎𝖌𝖍𝖙☾•4mo ago

I kind of feel that maybe it's tailwinds css that is unable to generate css for some reason as suspected that the devtools for some reason is not building the css in the second one I just did a tailwinds watch and linked the output css to index.html I don't really know how to trace the error / find why it's not working but sure if someone can help me then maybe this is a good first pr for us or me

Brendonovich•4mo ago

hmm nothing seems off there, can you reproduce the problem in stackblitz?

☼𝕯𝖆𝖞𝖑𝖎𝖌𝖍𝖙☾•4mo ago

alright it takes it's pretty time lol here https://stackblitz.com/edit/daisyui-solidjs-ppdn6e?file=src%2Findex.tsx so in the index.html comment out the stylesheet and you would see what I mean

Brendonovich•4mo ago

you're not importing index.css anywhere

☼𝕯𝖆𝖞𝖑𝖎𝖌𝖍𝖙☾•4mo ago

do I need to? 👀 amI dumb Thanks!!!

Gaming

Programming

Router brakes css