Nuxt Content – 500 Ошибка при загрузке динамически импортированного модуля: http://localhost:3000/_nuxt/pages/index.vue

У меня возникает ошибка, когда я перехожу к markdown-документу с главной страницы и нажимаю на стрелку, чтобы вернуться в браузере.

Мне показывает эту ошибку:

500
Не удалось получить динамически импортированный модуль: http://localhost:3000/_nuxt/pages/index.vue

Вот полная ошибка:

nuxt] ошибка, пойманная во время инициализации приложения H3Error: 
Не удалось получить динамически импортированный модуль: http://localhost:3000/_nuxt/pages/index.vue
Причина: TypeError: Не удалось получить динамически импортированный модуль: http://localhost:3000/_nuxt/pages/index.vue

Вот мой код […slug].vue:

<template>
    <main>
        <div>
            <content-renderer :value="prodData" />
        </div>
    </main>
</template>

<script lang="ts" setup>
    import { queryContent, useAsyncData, useRoute } from '#imports';

    const route = useRoute();
    const path = route.path;

    const { data } = await useAsyncData('content-data', () =>
        queryContent(path).findOne(),
    );

    const prodData = data.value;
</script>

Вот мой код index.vue:

<template>
    <AllPage>
         <Projects />
    </AllPage>
</template>

<script lang="ts" setup></script>
<style scoped></style>

Это компонент Projects:

<template>
    <div class="d-flex flex-column h-100 ga-10">
        <Card
            v-for="doc in docs"
            :key="doc._path"
            :description="doc.description"
            :image="doc.firstImage"
            :path="doc._path"
            :title="doc.title"
        />
    </div>
</template>

<script lang="ts" setup>
    import { queryContent, useAsyncData } from '#imports';

    function extractFirstImage(content) {
        if (!content || !content.children) return null; // Проверяет, что контент существует и имеет детей

        // Рекурсивно ищет среди детей, чтобы найти первое изображение
        for (const node of content.children) {
            if (
                node.type === 'element' &&
                node.tag === 'img' &&
                node.props &&
                node.props.src
            ) {
                return node.props.src; // Возвращает URL первого найденного изображения
            }

            // Если у ребенка есть дети, вызовите функцию рекурсивно
            if (node.children) {
                const image = extractFirstImage(node);
                if (image) return image;
            }
        }
        return null; // Изображение не найдено
    }

    const { data } = await useAsyncData('projects', () =>
        queryContent('/projects').find(),
    );

    const docs = data.value.map((doc) => ({
        ...doc,
        firstImage: extractFirstImage(doc.body), // Извлекает первое изображение
    }));
</script>

<style scoped>
    @import 'assets/css/dark-theme-content.css';
</style>

Это компонент Card:

<template>
    <v-card :href="path" class="project-card mx-auto rounded-lg" width="300px">
        <div class="img-container pa-3 w-100">
            <img
                v-if="displayImage"
                :src="images[`${displayImage}`]"
                alt="Изображение документа"
                class="card-img w-100 h-100 rounded-lg"
            />
        </div>

        <v-card-title class="card-title">{{ title }}</v-card-title>
        <v-card-subtitle class="card-description pb-3"
            >{{ description }}
        </v-card-subtitle>
    </v-card>
</template>
<script lang="ts" setup>
    import { filename } from 'pathe/utils';

    const props = defineProps({
        title: String,
        description: String,
        image: String,
        path: String,
    });

    console.log(props.path);

    const displayImage = props.image
      ?.replace('../../assets/img/content/', '')
      .replace(/\.(png|jpe?g|gif|bmp|webp)$/gi, '');

    // Импортирует все файлы изображений из папки @/assets/img/content
    const glob = import.meta.glob(`@/assets/img/content/*`, {
        eager: true, // Немедленно загружает изображения, чтобы они были доступны, как только компонент будет отрендерен
    });

    // Создает объект изображений, где каждый ключ - это имя файла, а каждое значение - URL изображения
    const images = Object.fromEntries(
        Object.entries(glob).map(([key, value]) => [filename(key), value.default]),
    );
</script>
<style scoped></style>

Это мой файл конфигурации nuxt:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

export default defineNuxtConfig({
  css: ['~/assets/css/style.css'],
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  app: {
    head: {
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      link: [
        {
          rel: 'stylesheet',
          href: 'https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css'
        },
        {
          rel: 'preconnect', href: 'https://fonts.googleapis.com'
        },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
        {
          href: 'https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap',
          rel: 'stylesheet'
        }
      ],
      script: [
        {
          src: 'https://cdn.anychart.com/releases/v8/js/anychart-base.min.js'

        },
        {
          src: 'https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js'
        }
      ]
    }
  },
  build: {
    transpile: ['vuetify']
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
    '@nuxt/content'
  ],/*
  content: {
    documentDriven: true
  }, */
  vite: {
    vue: {
      template: {
        transformAssetUrls
      }
    }
  },
  runtimeConfig: {
    public: {
      imageBasePath: '~/assets/img'
    }
  }
});