Preline doesn't work with Solid.js and solid-start

[unoexperto]

Hi folks. I'm shopping for components library and tried Preline as well. Just wanted to let you know it doesn't initialize with Solid.js. The problem is in useLocation(). Here is my entry-point file

import "./app.css";
import Nav from "~/components/Nav";
import { FileRoutes } from "@solidjs/start/router";
import {createEffect, createSignal, Suspense} from "solid-js";
import {Router, useLocation} from "@solidjs/router";
import "preline/preline";

import { IStaticMethods } from "preline/preline";
declare global {
    interface Window {
        HSStaticMethods: IStaticMethods;
    }
}

export default function App() {

    const location = useLocation();
    const [_, setLoc] = createSignal(location.pathname);

    createEffect(() => {
        setLoc(location.pathname);

        window.HSStaticMethods.autoInit();
    });

  return (
    <Router
      root={(props) => (
        <>
          <Nav />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

In runtime I get an error:

<A> and 'use' router primitives can be only used inside a Route.

[unoexperto]

Actually rewriting it like this helped

import "./app.css";
import Nav from "~/components/Nav";
import {FileRoutes} from "@solidjs/start/router";
import {Router, useLocation} from "@solidjs/router";
import {createSignal, createEffect, Suspense} from "solid-js";
import "preline/preline";
import {IStaticMethods} from "preline/preline";

declare global {
    interface Window {
        HSStaticMethods: IStaticMethods;
    }
}

export default function App() {

    return (
        <Router
            root={(props) => {

                const location = useLocation();
                const [_, setLoc] = createSignal(location.pathname);
                
                createEffect(() => {
                    setLoc(location.pathname);
                
                    window.HSStaticMethods.autoInit();
                });

                return <>
                    <Nav/>
                    <Suspense>{props.children}</Suspense>
                </>;
            }
            }
        >
            <FileRoutes/>
        </Router>
    );
}

Although I don't know why I need these manipulations with location - all components seem to work without it. Could you please explain?

[mia-z]

Can you share your full setup of preline? I cant seem to get it working even after I refactored it to what you showed.
I get the error :
Error when evaluating SSR module /src/app.tsx: failed to import "preline/preline" |- ReferenceError: self is not defined

[mia-z]

Okay I managed to fix it by creating a component which dynamically loads, taken from here and adapted using Solid-JS hooks.

"use client";

import { useLocation } from "@solidjs/router";
import { createEffect } from "solid-js";

const isBrowser = typeof window !== undefined;

export default function PrelineLoader() {
    const path = useLocation();

    createEffect(() => {
        if (isBrowser) {
            import("preline/preline");
        }
    }, []);

    createEffect(() => {
        setTimeout(() => {
            if (isBrowser) {
                import("preline/preline").then(({ HSStaticMethods }) => {
                    HSStaticMethods.autoInit();
                });
            }
        }, 100);
    }, [path]);

    return <></>;
}

And then use it in the app.tsx entry file

const RootLayout = (props: RouteSectionProps) => {
    return (
        <main class="container mx-auto w-208 flex flex-col pt-2 gap-4">
            <Suspense>{props.children}</Suspense>
            <PrelineLoader />
        </main>
    );
};

export default function App() {
    return (
        <Router root={RootLayout}>
            <FileRoutes />
        </Router>
    );
}

[langscot]

As you figured out, your initial runtime error is just because you're using useLocation outside the Router context, nothing to do with Preline.

I'm not too familiar with SolidJS, but the stuff you're doing with location is likely to re-run window.HSStaticMethods.autoInit() on every page change. Whenever you are conditionally rendering components (adding or removing DOM elements), you need to re-initialize the Preline components.

@mia-z's setTimeout with a 100 ms wait is quite hacky - really you just need your effect (where you're calling autoInit) to re-run any time a dependency which conditionally renders a component relying on Preline JS changes.

For example, you would want to re-run autoInit any time you change page, or if your user logs in which conditionally makes a profile dropdown appear, etc.

Hope this helps explain what's going on.

[mia-z]

because you're using useLocation outside the Router context, nothing to do with Preline.

I completely missed this, thanks!

Yeah the solution isn't really ideal, I just wanted to get it working and that little hacky method I stole from another thread worked for me. Gonna use your info to put together a nicer solution.