Todo project issue, localStorage not loading properly

Hi, currently Im doing the Todo project of the Front End track, and cant figure out whats wrong with my code. At the moment Im setting the modules for the project names, and for the localStorage. The problem is that I cant make the localStorage to load the projects on web page load, only on the submit button click.
Code of projects module:

 import { projectStorage } from './projectsStorage'

const projectRender = (() => {
    const addProjectName = document.querySelector('[data-add-project-form]');
    
    const renderNewProject = () => {
        addProjectName.addEventListener('submit', e => {
            e.preventDefault();
            removeElements();
            projectsRender(projectStorage.projectsList);
        });
    }
    renderNewProject();

    const projectsRender = (savedArrayOfProjects) => {
        const listOfProjectsDiv = document.querySelector('[data-list-of-projects]');
            savedArrayOfProjects.forEach(list => {
            const projectDiv = document.createElement('div');
            projectDiv.classList = 'project'
            listOfProjectsDiv.appendChild(projectDiv);
            const projectP = document.createElement('p');
            projectP.innerHTML = list.name;
            projectP.classList = 'projectName';
            projectDiv.appendChild(projectP);
            const deleteDiv = document.createElement('div');
            deleteDiv.classList = 'projectIcons'
            projectDiv.appendChild(deleteDiv);
            const deleteButton = document.createElement('button');
            deleteButton.classList = "editAndDeleteButton";
            const deleteIcon = document.createElement('i');
            deleteIcon.classList = "far fa-trash-alt";
            deleteButton.appendChild(deleteIcon);
            deleteDiv.appendChild(deleteButton);
        });
    }

    const removeElements = () => {
        const elementsToRemove = document.querySelectorAll('.project');
        elementsToRemove.forEach((element) => {
            element.remove();
        });
    }
})();

code from localStorage module:

import { Project } from './projectClass'

const projectStorage = (() => {
    const addProjectName = document.querySelector('[data-add-project-form]');
    const projectNameInput = document.querySelector('[data-project-name'); 
    const LOCAL_STORAGE_PROJECT_KEY  = 'projects.list'
    let projectsList = JSON.parse(localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY));

    addProjectName.addEventListener('submit', e => {
        e.preventDefault();
            const projectName = projectNameInput.value;
            if (projectName == null || projectName === '') {
                return
            }
            const newProject = new Project(Date.now().toString(), projectName);
            projectsList.push(newProject);
            projectNameInput.value = null;
            saveProjects();
    });

    const saveProjects = () => {    
        localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, JSON.stringify(projectsList));
    }
    
    return {
        projectsList
    }
})();   

export { projectStorage }

If I try to call the projectsList variable from the storage module to the project module for load, I get an error saying that the variable cant get accessed before inizialitation. How could this be approached?
Any suggestions are welcome, and thanks for reading!