Could not parse import/exports with acorn" Error After Adding a Component

[vangansenwillem]

Description:
As a user, I encountered the "Could not parse import/exports with acorn" error after adding a custom footer component and integrating it into the Orders domain.

Event Catalog Version: 2.4.0

Steps to Reproduce:

1. Initiate Event Catalog:

   • Run the following command to create a new Event Catalog instance:

     npx @eventcatalog/create-eventcatalog@latest test

2. Create Footer Component:

   • Create a folder named components in the root directory.

   • Add a file named footer.astro inside the components folder with the following content:

     ---
     import config from '@config';
     ---
     
     <div class="w-full text-right">
      <span class="italic text-gray-300">Event-driven architecture documentation: {config.organizationName}</span>
     </div>
     <Footer />

   • The content was copied from the example footer component.

3. Modify Orders Domain:

   • Replace the content of the Orders domain with the following:

     ---
     id: Orders
     name: Orders
     version: 0.0.3
     owners:
     - dboyne
     services:
     - id: InventoryService
      version: 0.0.2
     - id: NotificationService
      version: 0.0.2
     - id: OrdersService
      version: 0.0.2
     badges:
     - content: New domain
      backgroundColor: blue
      textColor: blue
     ---
     
     import Footer from '@catalog/components/footer.astro';
     
     ## Overview
     
     The Orders domain handles all operations related to customer orders, from creation to fulfillment. This documentation provides an overview of the events and services involved in the Orders domain, helping developers and stakeholders understand the event-driven architecture.
     
     <Admonition type="warning">Please ensure all services are updated to the latest version for compatibility and performance improvements.</Admonition>
     
     ## Bounded context
     
     <NodeGraph />
     
     ### Order example (sequence diagram)
     
     ```mermaid
     sequenceDiagram
      participant Customer
      participant OrdersService
      participant InventoryService
      participant NotificationService
     
      Customer->>OrdersService: Place Order
      OrdersService->>InventoryService: Check Inventory
      InventoryService-->>OrdersService: Inventory Available
      OrdersService->>InventoryService: Reserve Inventory
      OrdersService->>NotificationService: Send Order Confirmation
      NotificationService-->>Customer: Order Confirmation
      OrdersService->>Customer: Order Placed Successfully
      OrdersService->>InventoryService: Update Inventory

   • The content was copied from the example Orders domain.

4. Start the Event Catalog:

   • Run the following command to start the development server:

     npm run dev

   • Navigate to the Event Catalog in your browser.

Expected Behavior:
The Event Catalog should start successfully, and the custom footer component should be displayed on the Orders domain page.

Actual Behavior:
An error message is displayed: "Could not parse import/exports with acorn." This error occurs immediately after navigating to the Event Catalog.

[carlosallexandre]

@vangansenwillem I can't reproduce this error here. Could you create a repo for us?

My attempt to reproduce the error:

[vangansenwillem]

component-poc.zip Copy of a newly created event catalog with this error.

[carlosallexandre]

Let a new line between the import and the content ;

---
id: Orders
name: Orders
version: 0.0.2
owners:
  - dboyne
services:
  - id: InventoryService
    version: 0.0.2
  - id: NotificationService
    version: 0.0.2
  - id: OrdersService
    version: 0.0.2
badges:
  - content: New domain
    backgroundColor: blue
    textColor: blue
---

import Footer from '@catalog/components/footer.astro';

{/* Give a new line between the content and the imports */}
## Overview

And remove the <Footer /> from here.

---
import config from "@config";
---
Hello World
<div class="w-full text-right">
  <span class="italic text-gray-300"
    >Event-driven architecture documentation: {config.organizationName}</span
  >
</div>
<Footer /> {/* Remove me =). I'm not defined */}

[vangansenwillem]

Thanks now it works, don't know why i did it like that, thanks for the help! It might be useful though to mention explicitly that we need a new line between the content and the imports in the documentation.