SolidJS•3mo ago

Blank page while using vercel analytics

I deployed a website made in solid js in vercel i want to use vercel analytics but when i add it to the app.tsx all pages go blank here is the code for app.tsx file

import Home from "./pages/Home/Home";
import Login from "./pages/Login/Login";
import type { Component } from "solid-js";
import Verify from "./pages/verify/Verify";
import { Router, Route } from "@solidjs/router";
import Register from "./pages/Register/Register";
import Dashboard from "./pages/Dashboard/Dashboard";

const App: Component = () => {
  return (
    <Router>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route path="/verify" component={Verify} />
      <Route path="/" component={Home} />
      <Route path={`/dashboard/:year`} component={Dashboard} />
    </Router>
  );
};

export default App;

import Home from "./pages/Home/Home";
import Login from "./pages/Login/Login";
import type { Component } from "solid-js";
import Verify from "./pages/verify/Verify";
import { Router, Route } from "@solidjs/router";
import Register from "./pages/Register/Register";
import Dashboard from "./pages/Dashboard/Dashboard";

const App: Component = () => {
  return (
    <Router>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route path="/verify" component={Verify} />
      <Route path="/" component={Home} />
      <Route path={`/dashboard/:year`} component={Dashboard} />
    </Router>
  );
};

export default App;

in this I haven't added the analytics tag

8 Replies

SoorajOP•3mo ago

import Home from "./pages/Home/Home";
import Login from "./pages/Login/Login";
import type { Component } from "solid-js";
import Verify from "./pages/verify/Verify";
import { Router, Route } from "@solidjs/router";
import Register from "./pages/Register/Register";
import Dashboard from "./pages/Dashboard/Dashboard";

const App: Component = () => {
  return (
    <Router>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route path="/verify" component={Verify} />
      <Route path="/" component={Home} />
      <Route path={`/dashboard/:year`} component={Dashboard} />
    </Router>
  );
};

export default App;

import Home from "./pages/Home/Home";
import Login from "./pages/Login/Login";
import type { Component } from "solid-js";
import Verify from "./pages/verify/Verify";
import { Router, Route } from "@solidjs/router";
import Register from "./pages/Register/Register";
import Dashboard from "./pages/Dashboard/Dashboard";

const App: Component = () => {
  return (
    <Router>
      <Route path="/login" component={Login} />
      <Route path="/register" component={Register} />
      <Route path="/verify" component={Verify} />
      <Route path="/" component={Home} />
      <Route path={`/dashboard/:year`} component={Dashboard} />
    </Router>
  );
};

export default App;

Alex Lohr•3mo ago

The analytics tag is missing in this code snippet, too

SoorajOP•3mo ago

import Home from "./pages/Home/Home";
import Login from "./pages/Login/Login";
import type { Component } from "solid-js";
import Verify from "./pages/verify/Verify";
import { Router, Route } from "@solidjs/router";
import Register from "./pages/Register/Register";
import Dashboard from "./pages/Dashboard/Dashboard";
import { Analytics } from "@vercel/analytics/react";

const App: Component = () => {
  return (
    <>
      <Router>
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/verify" component={Verify} />
        <Route path="/" component={Home} />
        <Route path={`/dashboard/:year`} component={Dashboard} />
      </Router>
      <Analytics />
    </>
  );
};

export default App;

import Home from "./pages/Home/Home";
import Login from "./pages/Login/Login";
import type { Component } from "solid-js";
import Verify from "./pages/verify/Verify";
import { Router, Route } from "@solidjs/router";
import Register from "./pages/Register/Register";
import Dashboard from "./pages/Dashboard/Dashboard";
import { Analytics } from "@vercel/analytics/react";

const App: Component = () => {
  return (
    <>
      <Router>
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
        <Route path="/verify" component={Verify} />
        <Route path="/" component={Home} />
        <Route path={`/dashboard/:year`} component={Dashboard} />
      </Router>
      <Analytics />
    </>
  );
};

export default App;

sorry that was older code

Alex Lohr•3mo ago

Ah, yes. You try to directly insert a react component into a solid component. That's not going to fly.

SoorajOP•3mo ago

oh i didn't know i am new to web dev so there might be vercel analytic for solid js?

Alex Lohr•3mo ago

You are supposed to use the inject function from '@vercel/analytics' for other frameworks. Haven't tried it for solid yet.

SoorajOP•3mo ago

ohk will try that thank you

Alex Lohr•3mo ago

I should probably do a recipe for our script loader primitive at some point.

Gaming

Programming

Blank page while using vercel analytics