Bar not appearing

[r1zyn]

Trying to use nprogress with Next.js, but when I change page the bar doesn't appear. I've used nprogress many times before and it had always worked previously.

pages/__app.tsx

import AOS from "aos";
import type { AppProps } from "next/app";
import { Layout } from "../components/core/Layout";
import { NextRouter, useRouter } from "next/router";
import NProgress from "nprogress";

import { init } from "../lib/init";
import { useEffect } from "react";

import "../styles/globals.css";
import "nprogress/nprogress.js";

function App({ Component, pageProps }: AppProps) {
    const router: NextRouter = useRouter();

    useEffect((): (() => void) => {
        init();

        NProgress.configure({
            template:
                "<div class='bar' role='bar' style='height: 0.2rem; background: var(--p1);'></div>"
        });

        AOS.init();

        const handleStart: () => NProgress.NProgress =
            (): NProgress.NProgress => NProgress.start();
        const handleStop: () => NProgress.NProgress = (): NProgress.NProgress =>
            NProgress.done();

        router.events.on("routeChangeStart", handleStart);
        router.events.on("routeChangeComplete", handleStop);
        router.events.on("routeChangeError", handleStop);

        return (): void => {
            router.events.off("routeChangeStart", handleStart);
            router.events.off("routeChangeComplete", handleStop);
            router.events.off("routeChangeError", handleStop);
        };
    }, [router.events]);

    return (
        <Layout
            meta={{
                title: pageProps.title,
                description: pageProps.description
            }}>
            <Component {...pageProps} />
        </Layout>
    );
}

export default App;

I also import the stylesheet in globals.css (using postcss-import with Tailwind CSS)

[caprica-Six]

@r1zyn - Below works for me, hope it helps:

pages/__app.tsx

import NProgress from 'nprogress'; import Router from 'next/router'; import '../styles/globals.css';

Router.events.on('routeChangeStart', () => NProgress.start()); Router.events.on('routeChangeComplete', () => NProgress.done()); Router.events.on('routeChangeError', () => NProgress.done());

export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> }