I had a project in a git repo. I tried to push it to github and it wouldn't let me. It said the version on github was more recent than the one on my local machine. But I only dev on this machine, and I had not pushed new changes for days. So I had a lot of changes I didn't want to lose. So, I just tried to delete the .git file and start fresh. But it was giving me issues. So I just copied the entire file structure over to a new file to start fresh. But now it is giving me a warning 'Anonymous arrow functions cause Fast Refresh to not preserve local component state.'

I had never gotten this warning when working out of the other folder.

What's even more confusing, the page it is throwing a warning for, the _app.js file, exports a named function.

I dont understand.

Here's the _app.js file.

import '../styles/globals.css'
import Layout from '../components/Layout';
import { useState } from 'react';

export default function MyApp({ Component, pageProps }) {
  // state
  let [activeTab, setActiveTab] = useState('Sign In')

  return (
    <Layout activeTab={activeTab}>
      <Component {...pageProps} />
    </Layout>
  )
}

I even checked the layout component, wondering if that one was anonymous. It's not.

import styles from '../styles/styles.module.scss';
import Sidebar from './Dashboard/Sidebar';

export default function Layout({children, activeTab}){
    return (
        <div className={styles.container}>
            <div className={styles.main}>
            <div className={styles.dash}>
                <Sidebar activeTab={activeTab}/>
                <div className={styles.content}>
                    {children}
                </div>
            </div>
            </div>
        </div>
    )
}