Migrating from CRA to NextJs, seeing ReferenceError: cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

I'm trying to migrate to nextJs from CRA. I'm getting an error with one my the webpack imports. It's basically saying it's undefined or not initialized. Here's my _app.tsx:

import AppProviders from "../src/AppProviders";
import Bugsnag from "@bugsnag/js";
import BugsnagPluginReact, { BugsnagErrorBoundary } from "@bugsnag/plugin-react";
import type { AppProps } from "next/app";
import React, { useEffect } from "react";
import ErrorPage from "../src/components/general-ui/state-messages/ErrorPage";
import { useServiceWorker } from "../src/serviceWorker";

console.log("AppProviders");
console.log(AppProviders); //undefined
function App({ Component, pageProps }: AppProps) {
  if (typeof window !== "undefined") {
    useServiceWorker();
  }

  let ErrorBoundary: BugsnagErrorBoundary | undefined;
  useEffect(() => {
    let releaseStage = "development";
    if (typeof window !== "undefined" && window.location.hostname === "app.occasional.ly") {
      releaseStage = "production";
    }
    Bugsnag.start({
      apiKey: "2c57b037be00cbfbf5a98269b31e3099",
      plugins: [new BugsnagPluginReact()],
      enabledReleaseStages: ["production"],
      releaseStage,
    });
    ErrorBoundary = Bugsnag.getPlugin("react")?.createErrorBoundary(React);
  }, []);

  if (!ErrorBoundary) {
    return (
      <AppProviders>
        <Component {...pageProps} />
      </AppProviders>
    );
  }

  return (
    <ErrorBoundary FallbackComponent={ErrorPage}>
      <AppProviders>
        <Component {...pageProps} />
      </AppProviders>
    </ErrorBoundary>
  );
}

export default App;

And this is app providers:

import { FC } from "react";
import { AuthWrapper } from "./auth/AuthWrapper";
import GraphQLWrapper from "./graphql/GraphQLWrapper";
import { Provider as ReduxProvider } from "react-redux";
import { store } from "./redux/store";
import ThemeWrapper from "./ThemeWrapper";
import { GlobalMessageWrapper } from "./global-messages/GlobalMessageWrapper";
import { GlobalMessageFeed } from "./global-messages/GlobalMessageFeed";

const AppProviders: FC = ({ children }) => {
  return (
    <AuthWrapper>
      <GraphQLWrapper>
        <ReduxProvider store={store}>
          <ThemeWrapper>
            <GlobalMessageWrapper>
              {children} <GlobalMessageFeed />
            </GlobalMessageWrapper>
          </ThemeWrapper>
        </ReduxProvider>
      </GraphQLWrapper>
    </AuthWrapper>
  );
};

export default AppProviders;

I have no circular dependencies I have already ran the circular dependency plugin. next.config.js:

/** @type {import('next').NextConfig} */

const CircularDependencyPlugin = require("circular-dependency-plugin");

module.exports = {
  reactStrictMode: true,
  webpack: (config, options) => {
    const circularDependencyPlugin = new CircularDependencyPlugin({
      // exclude detection of files based on a RegExp
      exclude: /a\.js|node_modules/,
      // include specific files based on a RegExp
      // include: //,
      // add errors to webpack instead of warnings
      failOnError: true,
      // allow import cycles that include an asyncronous import,
      // e.g. via import(/* webpackMode: "weak" */ './file.js')
      allowAsyncCycles: false,
      // set the current working directory for displaying module paths
      cwd: process.cwd(),
      // `onStart` is called before the cycle detection starts
      onStart({ compilation }) {
        console.log("start detecting webpack modules cycles");
      },
      // `onDetected` is called for each module that is cyclical
      onDetected({ module: webpackModuleRecord, paths, compilation }) {
        console.log("new CD error");
        console.log(paths);
        // `paths` will be an Array of the relative module paths that make up the cycle
        // `module` will be the module record generated by webpack that caused the cycle
        compilation.errors.push(new Error(paths.join(" -> ")));
      },
      // `onEnd` is called before the cycle detection ends
      onEnd({ compilation }) {
        console.log("end detecting webpack modules cycles");
      },
    });
    config.plugins.push(circularDependencyPlugin);
    return config;
  },
};

It also always complains about line 4 of AppProviders.tsx.... not sure why! Does anyone know what the issue could be or has had experience with this? Thanks!!!!