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

[Mohd Shahid]

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

[Apal Shah]

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

[Mohd Shahid]

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);

[Apal Shah]

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