SolidJS•11mo ago

Added the official solid-router, followed the docs, now nothing loads

I'm very new to Solid but I had a working SPA (I'm using vite and plain JS) until I added the official solid-router, followed all the steps in the docs, and now none of my components load. Feeling pretty frustrated and hoping someone can help! index.jsx

import { render } from 'solid-js/web';
import { Router } from "@solidjs/router";
import App from './App';
import './index.css';

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

render(
  () => (
    <Router>
      <App />
    </Router>
  ),root);

import { render } from 'solid-js/web';
import { Router } from "@solidjs/router";
import App from './App';
import './index.css';

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

render(
  () => (
    <Router>
      <App />
    </Router>
  ),root);

App.jsx

import { onMount } from "solid-js";
import { Routes, Route } from "@solidjs/router";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Friends from "./pages/Friends";

export default function App() {
  onMount(() => {
    console.log("App Mounted")
  });

  return (
    <div class="bg-gradient-to-br from-blue-chill-300 dark:from-blue-chill-950 to-blue-chill-100 dark:to-blue-chill-700">
      <Header />
      <Routes>
        <Route path="/" component={Friends} />
      </Routes>
      <Footer />
    </div>
  );
}

import { onMount } from "solid-js";
import { Routes, Route } from "@solidjs/router";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Friends from "./pages/Friends";

export default function App() {
  onMount(() => {
    console.log("App Mounted")
  });

  return (
    <div class="bg-gradient-to-br from-blue-chill-300 dark:from-blue-chill-950 to-blue-chill-100 dark:to-blue-chill-700">
      <Header />
      <Routes>
        <Route path="/" component={Friends} />
      </Routes>
      <Footer />
    </div>
  );
}

Hopefully someone can point me in the right direction!

1 Reply

bschem•11mo ago

Turns out I just needed some time away from it! >> npm outdated

Package            Current  Wanted  Latest  Location                        Depended by
solid-devtools      0.27.9  0.27.9  0.28.1  node_modules/solid-devtools     solid-friends-frontend
solid-js             1.7.6   1.8.5   1.8.5  node_modules/solid-js           solid-friends-frontend
vite                 4.3.9   4.5.0   4.5.0  node_modules/vite               solid-friends-frontend
vite-plugin-solid    2.7.0   2.7.2   2.7.2  node_modules/vite-plugin-solid  solid-friends-frontend

Package            Current  Wanted  Latest  Location                        Depended by
solid-devtools      0.27.9  0.27.9  0.28.1  node_modules/solid-devtools     solid-friends-frontend
solid-js             1.7.6   1.8.5   1.8.5  node_modules/solid-js           solid-friends-frontend
vite                 4.3.9   4.5.0   4.5.0  node_modules/vite               solid-friends-frontend
vite-plugin-solid    2.7.0   2.7.2   2.7.2  node_modules/vite-plugin-solid  solid-friends-frontend

>> npm update solid-devtools solid-js vite vite-plugin-solid Problem fixed!

Gaming

Programming

Added the official solid-router, followed the docs, now nothing loads