Javascript-форум - Пытаюсь повторить route на новом макете, но дает ошибку

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Пытаюсь повторить route на новом макете, но дает ошибку (https://javascript.ru/forum/misc/83345-pytayus-povtorit-route-na-novom-makete-no-daet-oshibku.html)

Пытаюсь повторить route на новом макете, но дает ошибку

Привет всем! Сразу к тебе решил повторить маршрутизацию для сайта которую я делал раньше. Оно на другом проекте работает ну и я решил попробывать опять его сделать на другом макете проекта. Повторил все как было на другом макете и в итоге получил ошибки Cannot set property 'innerHTML' of null
at all_pain_fun. Может быть кто-то знает в чем ошибка? Из-за нее я даже не вижу страницы которые должны за счет маршрутизации грузится, типо изначальной страницой должно быть с функцией [page_1 тоесть первая ну и за счет маршрутизации передвигатся по 3 функциям page 1, page 2 и page_3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./dist/styles.css">
    <title>Route</title>
</head>
<body>
    <!-- <script src="./dist/bundle.js"></script> -->
    <script type="module" src="./src/header/header.js"></script>
    <script type="module" src="./src/page_1/page_1.js"></script>
    <script type="module" src="./src/page_2/page_2.js"></script>
    <script type="module" src="./src/page_3/page_3.js"></script>
    <script type="module" src="./src/route/route.js"></script>
    <script type="module" src="./src/main/main.js"></script>
</body>
</html>

route

import {page_1 as index} from '../page_1/page_1.js';
import {page_2} from '../page_2/page_2.js'; 
import {page_3} from '../page_3/page_3.js';

const m = document.querySelector('main') 

const all_pain = { 
    index,
    page_2,
    page_3,
}

let history_ = location.search.slice(1)

const all_pain_fun = (first,pathname = location.search.slice(1)) => {

   if(first &&  history_ === pathname) return

   pathname.length > 10 && (pathname = 'index')

  !pathname &&  (pathname = 'index')

    m.innerHTML = '';

    all_pain[pathname](m)

    history.pushState('', {}, '?'+pathname) 
    
    history_ = location.search.slice(1)
}

all_pain_fun(false) 

document.querySelector('.header__menu').addEventListener('click', e=>{ 
    if(e.target.tagName !== 'A')return 
all_pain_fun(true, e.target.title) 
})

script с подключением все js файлы

import "./header/header.js"
import "./page_1/page_1.js"
import "./page_2/page_2.js"
import "./page_3/page_3.js"
import "./main/main.js"

тег main типо главная оболочка

function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}
main(document.querySelector('body'));

страница 1 (код у всех страниц одинаковый кроме названий)

function page_1(root) {
    const main_1 = document.createElement("div")
    main_1.classList.add("page_2")
    root.append(main_1)
}
export { page_1 }

header

const item_menu = [
    ["index", "Page_1"],
    ["page_2", "Page_2"],
    ["page_3", "Page_3"],
]

function header(root) {
    const header = document.createElement("header")
    header.classList.add("header")
    const header__wrapper = document.createElement("div")
    header__wrapper.classList.add("header__wrapper")
    const header__content = document.createElement("div")
    header__content.classList.add("header__content")
    const header__menu = document.createElement("ul")
    header__menu.classList.add("header__menu")

    let srt = "";
    for(let e of item_menu) {
        srt += `
            <li class="header__item">
                <a class="header__link" title="${e[0]}">${e[1]}</a>
            </li>
        `;
    }

    header__menu.innerHTML += srt;
    header__content.append(header__menu)
    header__wrapper.append(header__content)
    header.append(header__wrapper)
    root.append(header)
}

header(document.querySelector('body'));

index

import "./script.js"
import "./header/header.scss"
import "./page_1/page_1.scss"
import "./page_2/page_2.scss"
import "./page_3/page_3.scss"

P.S надеюсь тему обьяснил

main.js должен подключаться до route.js, потому что route.js просит document.querySelector('main'), а его там нет.

Да я вот заметил что даже просто найти такой элемент который я пытаюсь достать const m = document.querySelector("main")(или класс его) оно выдает null. хотя файл route подключен к index.html

Alexander3928, страница загружается не сразу, а последовательно, а скрипты выполняются сразу как загрузились. На момент запуска route.js никакого main.js ещё не существует.

Цитата:

Сообщение от Aetae

а скрипты выполняются сразу как загрузились.

Нет. Скрипты с type=module выполняются после построения DOM, с учетом import
Надо в route сделать
import '../main/main.js';
Тогда route будет выполняться после main

voraa, а module, ну да после загрузки страницы, ток оно всё равно следует правилам defer, а значит при прочих равных выполняется в порядке подключения.

я разобрался. Неправильно просто выставил скрипты

не обизательно. Я переставил скрипт то-есть main после header и заработало

Цитата:

Сообщение от Aetae

ток оно всё равно следует правилам defer, а значит при прочих равных выполняется в порядке подключения.

Вот только что попробовал
index.html

<head>
<script type=module src='./m1.js'></script>
<script type=module src='./m2.js'></script>
</head>
<body>
</body>

m1.js

import './m2.js'
console.log('m1');

m2.js

console.log('m2');

Выводит
m2 m2.js:1
m1 m1.js:2

Тут просто
<script type=module src='./m2.js'></script> вообще не будет работать.
Потому, что при обработке
import './m2.js'
отмечается, что надо скачать m2.js и выполнить его до m1.js
А второй раз модуль скачиваться и выполняться не будет

Так, что в примере с route
<script type="module" src="./src/page_1/page_1.js"></script>
<script type="module" src="./src/page_2/page_2.js"></script>
<script type="module" src="./src/page_3/page_3.js"></script>
вообще лишние.

import {page_1 as index} from '../page_1/page_1.js';
import {page_2} from '../page_2/page_2.js';
import {page_3} from '../page_3/page_3.js';
Уже достаточно, что бы они загрузились и выполнились перед route

Цитата:

Сообщение от voraa

Ну тут я ошибся. Работает как раз он (посмотрел на сеть - кто там источник запроса)
Но все равно, когда дело касается модулей ES6, все модули сначала анализируются на то, кто из кого импортирует, и выполнение происходит с учетом этого.