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} /> }