apal21 / nextjs-progressbar

A simple Next.js progressbar component using NProgress.
https://www.npmjs.com/package/nextjs-progressbar
MIT License
776 stars 61 forks source link

NextNProgress is not defined following the tutorial #71

Closed marfin-lab closed 2 years ago

marfin-lab commented 2 years ago

_app.js ` // Components // Natives import { NextIntlProvider } from 'next-intl'; import { useRouter } from 'next/router'; import { useEffect } from 'react';

// * Dependencies
import NextNprogress from 'nextjs-progressbar';
import * as gtag from '/services/gtag';
import Analytics from '/components/global/analytics';

// * Context
import { AppWrapper } from '/context/state';

// * CSS
import 'tailwindcss/tailwind.css';

// * Render
export default function MyApp({ Component, pageProps }) {

    const router = useRouter();

    useEffect(() => {
        const handleRouteChange = url => {
            gtag.pageview(url);
        }
        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            router.events.off('routeChangeComplete', handleRouteChange)
        }
    }, [router.events]);

    return (
        <>
            <NextIntlProvider messages={pageProps.messages}>
                <AppWrapper>
                    <NextNProgress color='#3e63ca' />
                    <Component {...pageProps} className='antialiased' />
                    <Analytics />
                </AppWrapper>
            </NextIntlProvider>
        </>
    )
}

`

What i'm doing wrong? Captura de Tela 2022-02-23 às 11 45 14

apal21 commented 2 years ago

Check the spelling again...

import NextNprogress from 'nextjs-progressbar';

This has lowercase P and,

<NextNProgress color='#3e63ca' />

this has uppercase P