Getting error "ReferenceError: Cannot access 'Base' before initialization" when running a next.js webapp locally

Question

This is the full index.tsx file's contents:

import { Base } from '../templates/Base';

const Index = () => <Base />;

export default Index;

I've checked other posts with this error message, but none have been structured like this. I'm not really sure what's causing the error, as Base is imported before being referenced. What would "initialization" of Base look like in this instance?

The Base file:

import { Meta } from '../layout/Meta';
import { AppConfig } from '../utils/AppConfig';
import { Banner } from './Banner';
import { Footer } from './Footer';
import { Hero } from './Hero';
import { List } from './List';
import { Navbar } from './Navbar';
import { VerticalFeatures } from './VerticalFeatures';
// import { Search } from './Search';

const Base = () => (
  <div className="antialiased text-gray-600">
    <Meta title={AppConfig.title} description={AppConfig.description} />
    <Navbar />
    <Hero />
    {/* <Search /> */}
    <List />
    <VerticalFeatures />
    <Banner />
    <Footer />
  </div>
);

export { Base };

Answer 1

It seems that there has been a change in SWC：https://github.com/vercel/next.js/issues/46734

After changing const to function, there were no errors reported.