Circular dependencies in Nextjs 13 and Storyblok

Question

This is my first time using Next.js 13 with Storyblok. To get started, I used this template which worked great in the begining. But now I am running into a circular dependency error.

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

Relevent to the error are these components:

component-list.js - List of every component/blok (Import every Component!)

import Page from '@components/contentTypes/Page'
import News from '@components/contentTypes/News'
import NewsArticle from '@components/contentTypes/NewsArticle'
import Grid from './grid/Grid'
import Feature from './feature/Feature'
import Teaser from './teaser/Teaser'
import Config from './config/Config'
import MenuHeader from './config/MenuHeader'
import MenuLink from './config/MenuLink'
import MenuGroup from './config/MenuGroup'

export const ComponentsMap = {
  page: Page,
  news: News,
  newsArticle: NewsArticle,
  grid: Grid,
  feature: Feature,
  teaser: Teaser,
  config: Config,
  "menu_header": MenuHeader,
  "menu_link": MenuLink,
  "menu_group": MenuGroup
}

StoryblokComponent - Returns the right component based on the blok json (Imports components-list)

import React, { FunctionComponent } from 'react'
import { ComponentsMap } from './components-list'


export const StoryblokComponent = ({ blok, ...restProps }) => {
  if (!blok) {
    console.error("Please provide a 'blok' property to the StoryblokComponent")
    return <div>Please provide a blok property to the StoryblokComponent</div>
  }
  if(blok.component) {
    const Component = getComponent(blok.component)
    if (Component) {
      return <Component blok={blok} {...restProps} />
    }
  }
  return <></>
}

const getComponent = (componentKey: string) => {
  if (!ComponentsMap[componentKey]) {
    console.error(`Component ${componentKey} doesn't exist.`)
    return false
  }
  return ComponentsMap[componentKey]
}

and some Content-Element, for example this Grid component (imports StoryblokComponent)

import { storyblokEditable } from '@storyblok/js'
import { StoryblokComponent } from '@components/StoryblokComponent'


const Grid = ({ blok }) => {
  return (
    <div {...storyblokEditable(blok)}>
      {blok.columns.map((nestedBlok) => (
        <StoryblokComponent key={nestedBlok._uid} blok={nestedBlok} />
      ))}
    </div>
  )
}

export default Grid

So i guess the probleme here is the following:

components-list imports component, StoryblokComponent imports component-list, Component imports StoryblokComponent.

In some way the components imports itself.

I've tried fetching the component-list once in the layout and pass it down to every StoryblokComponent, but i got an error saying something about it being not allowed to pass functions as props or something. I never had to deal with circular dependencys before, so i have no experience in how to deal with them. Maybe someone has good idea how to handle the component list import. Any help is appreciated.