TypeError: Cannot read properties of undefined (reading 'shallow')

[sidmirza4]

I am having this error in my project. I have followed every instruction given in documentations.

[apal21]

Could you please share a sample repo which has this issue?

[sidmirza4]

This is my _app.tsx:

import React, { useEffect } from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import router, { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import { useDispatch } from 'react-redux';
import { ThemeProvider } from '@material-ui/core/styles';
import Bugsnag from '@bugsnag/js';
import BugsnagPluginReact from '@bugsnag/plugin-react';
import mixpanel from 'mixpanel-browser';
import { MixpanelProvider } from 'react-mixpanel';

import theme from '../shared/theme/theme';
import { wrapper } from '../../redux/store';
import NotistackProvider from '../../NotistackProvider';
import { ProvideAuth, useAuth } from '../modules/auth/contexts/auth';
import { ProvideAnalytics } from '../modules/analytics/contexts/analytics';
import { getUserData } from '../modules/user/redux/userSlice';
import settings from '../shared/config/settings';
import '../shared/config/firebase';
import '../index.css';
import { useAnalytics } from '../modules/analytics/contexts/analytics';
import ActivityIndicatorFull from '../shared/components/UI/ActivityIndicatorFull';
import NextNProgress from 'nextjs-progressbar';

function Main({ Component, pageProps }: AppProps) {
    const authCtx = useAuth();
    const dispatch = useDispatch();
    const router = useRouter();
    const { enqueueSnackbar } = useSnackbar();
    const analytics = useAnalytics();

    function customize_tawk_widget() {
        try {
            var el = document.querySelectorAll(
                '[title="chat widget"]'
            )[0] as HTMLElement;
            el.style.bottom = '80px';
            el.style.right = '20px';
        } catch (e) {}
    }
    useEffect(() => {
        if (authCtx.user) {
            const fetchUserData = async () => {
                const error = await dispatch(getUserData());
                if (error) {
                    enqueueSnackbar(error, {
                        variant: 'error',
                    });
                }
            };

            fetchUserData();

            Bugsnag.setUser(
                authCtx.user._id,
                authCtx.user.email,
                `${authCtx.user.firstName} ${authCtx.user.lastName}`
            );
        }

        if (settings.tawktoUrl) {
            var Tawk_API: any = Tawk_API || {},
                Tawk_LoadStart = new Date();

            if (authCtx.user) {
                Tawk_API.visitor = {
                    name: `${authCtx.user.firstName} ${authCtx.user.lastName}`,
                    email: authCtx.user.email,
                };
            }

            let s1 = document.createElement('script'),
                s0 = document.getElementsByTagName('script')[0];
            s1.async = true;
            s1.src = settings.tawktoUrl;
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode!.insertBefore(s1, s0);
        }

        setInterval(() => {
            customize_tawk_widget();
        }, 1000);
    }, [authCtx.user]);

    // Tracking PageViews for Google Analytics
    useEffect(() => {
        const handleRouteChange = (url: string) => {
            analytics.logPageView(url);
        };
        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, [router.events]);

    if (authCtx.loading) {
        return (
            <>
                <NextNProgress
                    color='black'
                    height={8}
                    options={{ easing: 'ease', speed: 500 }}
                />
                <ActivityIndicatorFull loading />;
            </>
        );
    } else {
        return (
            <>
                <NextNProgress
                    color='black'
                    height={8}
                    options={{ easing: 'ease', speed: 500 }}
                />
                <Component {...pageProps} />;
            </>
        );
    }
}

function App({ Component, pageProps }: AppProps) {
    Bugsnag.start({
        apiKey: settings.bugSnagApiKey,
        plugins: [new BugsnagPluginReact()],
        releaseStage: settings.environment,
        enabledReleaseStages: ['production', 'staging'],
        appVersion: settings.appVersion,
    });
    mixpanel.init(settings.mixpanelToken);

    const ErrorBoundary = Bugsnag.getPlugin('react')!.createErrorBoundary(React);

    return (
        <ErrorBoundary>
            <ThemeProvider theme={theme}>
                <NotistackProvider>
                    <MixpanelProvider mixpanel={mixpanel}>
                        <ProvideAnalytics>
                            <ProvideAuth>
                                <Head>
                                    <title>Nawvel</title>
                                    <meta
                                        name='description'
                                        content='Build your lifebook of learning'
                                    />
                                    <meta
                                        name='viewport'
                                        content='initial-scale=1.0, width=device-width'
                                    />
                                    <link
                                        href='https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'
                                        rel='stylesheet'
                                    ></link>
                                </Head>
                                <Main Component={Component} pageProps={pageProps} />
                            </ProvideAuth>
                        </ProvideAnalytics>
                    </MixpanelProvider>
                </NotistackProvider>
            </ThemeProvider>
        </ErrorBoundary>
    );
}

export default wrapper.withRedux(App);

[apal21]

Can't reproduce this locally. Are you sure it is coming from this package only?