Why is mainContent undefined in my todo app

I’ve written a todo app after i finished i am separating it into modules the displayProject is working fine but the displaytodo isn’t i get this error

Uncaught TypeError: Cannot read properties of undefined (reading ‘querySelectorAll’)

I’ve tried to use console.log to see what the problem is mainContent is undefined for displayTodo but not displayProject even though it is called before it i think this is a timing issue but i don’t understand how

import './style.css';
import {displayTodo} from "./displaytodo"
import {displayProject} from "./displayproject"
import {canvasFunction} from "./canvas"
import {projectLocalStorage} from "./projectlocalstorage"
import {todoLocalStorage} from "./todolocalstorage"
document.addEventListener('DOMContentLoaded', () => {
    canvasFunction();
    const mainContent = document.querySelector('.main-content')
    console.log(mainContent);  
    const showButton1 = document.getElementById("showDialog1");
    const showButton2 = document.getElementById("showDialog2");
    const addProject = document.getElementById("addProject")
    const favDialog = document.getElementById("favDialog");
    const form1 = document.querySelector('#form1');
    const favDialogEdit = document.querySelector('#favDialogEdit');
    const form2 = document.querySelector('#form2');
    const form = document.querySelector('#form');
    let todos = JSON.parse(localStorage.getItem('todo-s')) || [];
    let projects = JSON.parse(localStorage.getItem('project-s')) || [];
    let editIndex;
    showButton1.addEventListener("click", () => {
        addProject.showModal();
    })
    showButton2.addEventListener("click", () => {
        favDialog.showModal();
    });
    form.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!form.checkValidity()) {
            return;
        }
        const name = document.querySelector("#name2").value;
        if (projects.some(project => project.name === name)) {
            alert('Project with this name already exists');
            return;
        }
        function project(name) {
            this.name = name;
        }
        let newProject = new project(name);
        projects.push(newProject);
        displayProject();
        addProject.close();
        form.reset();
    });
    form1.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!form1.checkValidity()) {
            return;
        }
        const name = document.querySelector("#name").value;
        const title = document.querySelector("#title").value;
        const date = document.querySelector("#date").value;
        const priority = document.querySelector("#priority").value;
        const project = document.querySelector("#projects").value;
        function todo(name, title, date, priority, project) {
            this.name = name;
            this.title = title;
            this.date = date;
            this.priority = priority;
            this.project = project;
            this.completed = false;
        }
        let newTodo = new todo(name, title, date, priority, project);
        todos.push(newTodo);
        displayTodo();
        favDialog.close();
        form1.reset();
    });
    form2.addEventListener("submit", (event) => {
        event.preventDefault();
        if (!form2.checkValidity()) {
            return;
        }
        const name = document.querySelector("#name1").value;
        const title = document.querySelector("#title1").value;
        const date = document.querySelector("#date1").value;
        const priority = document.querySelector("#priority1").value;
        const project = document.querySelector("#projects1").value;
        const completed = todos[editIndex].completed;
        function todo(name, title, date, priority, project) {
            this.name = name;
            this.title = title;
            this.date = date;
            this.priority = priority;
            this.project = project;
            this.completed = completed;
        }
        let editedTodo = new todo(name, title, date, priority, project);
        todos[editIndex] = editedTodo;
        displayTodo();
        favDialogEdit.close();
        form2.reset();
    })
    const deleteBtn = document.querySelector('#delete');
    deleteBtn.addEventListener('click', () => {
        todos.splice(editIndex, 1);
        displayTodo();
        favDialogEdit.close();
    });
    displayProject(projects, mainContent);
    displayTodo(todos, mainContent);
})
import { todoLocalStorage } from "./todolocalstorage";
const displayTodo = (todos, mainContent) => {
    console.log(mainContent);  
    console.log(mainContent.querySelectorAll('.project'));  
    mainContent.querySelectorAll('.project').forEach(projectDiv => {
        projectDiv.querySelectorAll('.todo').forEach(todo => todo.remove());
        const projectTodos = todos.filter(todo => todo.project === projectDiv.querySelector('h1').textContent);
        projectTodos.forEach((todo, index) => {
            const div = document.createElement('div');
            div.classList.add('todo');
            div.dataset.index = index;
            const checkbox = document.createElement('input')
            checkbox.type = 'checkbox';
            checkbox.checked = todo.completed;
            checkbox.addEventListener('change', () => {
                todo.completed = checkbox.checked;
            });
            const name = document.createElement('p');
            name.textContent = todo.name;
            const date = document.createElement('p');
            date.textContent = todo.date;
            const edit = document.createElement('button');
            edit.textContent = 'Edit';
            edit.addEventListener('click', () => {
                editIndex = index;
                document.querySelector("#name1").value = todo.name;
                document.querySelector("#title1").value = todo.title;
                document.querySelector("#date1").value = todo.date;
                document.querySelector("#priority1").value = todo.priority;
                document.querySelector("#projects1").value = todo.project;
                favDialogEdit.showModal();
            });
        div.appendChild(checkbox);
        div.appendChild(name);
        div.appendChild(date);
        div.appendChild(edit)
        projectDiv.appendChild(div);
        });
    })
    todoLocalStorage();
}
export {displayTodo}