Error in importing and using functions from a Firestore file in another JavaScript file

I’m working on a JavaScript project that uses Firebase Firestore. I have a file called index.js that initializes Firebase and exports a few functions, and another file sort.js that imports these functions and uses them. However, when I try to run my project, I’m getting an error that seems to indicate that sort.js can’t import the functions from index.js.

Here is my index.js:

import { initializeApp } from "firebase/app";
import { getFirestore, addDoc, collection } from "firebase/firestore";

const firebaseConfig = {
  apiKey: ,
  authDomain:,
  databaseURL: ,
  projectId: ,
  storageBucket: ,
  messagingSenderId: ,
  appId: ,
  measurementId: 
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// People tabel 
async function savePersonToFirestore(personData) {
  const { name, age, gender, group } = personData;
  try {
    const docRef = await addDoc(collection(db, "people"), {
      name: name,
      age: age,
      gender: gender,
      group: group,
    });
    console.log("Person data saved with ID: ", docRef.id);
    return docRef.id;
  } catch (error) {
    console.error("Error saving person data: ", error);
    throw error;
  }
}

// Rooms
async function saveRoomToFirestore(roomData) {
  const { name, seats } = roomData;
  try {
      const docRef = await addDoc(collection(db, "rooms"), {
          name: name,
          seats: seats,
      });
      console.log("Room data saved with ID: ", docRef.id);
      return docRef.id;
  } catch (error) {
      console.error("Error saving room data: ", error);
      throw error;
  }
}

export { db, savePersonToFirestore, saveRoomToFirestore };

THis is my sort.js code:

import { collection, query, orderBy, onSnapshot } from "firebase/firestore";
import { db, saveRoomToFirestore } from "../index.js";

document.addEventListener('DOMContentLoaded', () => {
    const roomForm = document.getElementById('room-form');
    const roomsContainer = document.getElementById('rooms-container');

    // Fetch and display existing rooms from Firestore
    fetchRoomsFromFirestore(roomsContainer);

    roomForm.addEventListener('submit', async (e) => {
        e.preventDefault();

        const roomName = document.getElementById('room-name').value;
        const seats = document.getElementById('seats').value;

        try {
            const roomId = await saveRoomToFirestore({ name: roomName, seats: parseInt(seats) });

            // Clear input fields
            roomForm.reset();

        } catch (error) {
            console.error('Error saving room to Firestore:', error);
        }
    });
});

function fetchRoomsFromFirestore(roomsContainer) {
    const roomsRef = collection(db, 'rooms');
    const roomsQuery = query(roomsRef, orderBy('name', 'asc'));

    roomsContainer.innerHTML = '';

    onSnapshot(roomsQuery, (querySnapshot) => {
        querySnapshot.forEach((doc) => {
            const roomData = doc.data();

            const roomElement = document.createElement('div');
            roomElement.classList.add('room');
            roomElement.innerHTML = `<strong>${roomData.name}</strong> - Seats: ${roomData.seats}`;

            roomsContainer.appendChild(roomElement);
        });
    }, (error) => {
        console.error("Error fetching rooms: ", error);
    });
}

I checked the file paths, checked the export statements, checked the package.json file, checked the wepack.config.cjs, Reinstalled Node Modules.