Błąd "Loading failed for the module with source" w Firefoksie

Odpowiedz Nowy wątek
2019-07-01 18:30
1

Tworzę sobie niewielki projekt w JavaScripcie. Chciałbym skorzystać z systemu modułów JavaScript. W internecie, jak widzę, popularne jest korzystanie z serwera do działania na modułach. Nie chciałbym jednak na razie z niego korzystać, a wolałbym operować na protokole file:///.

Niestety, przy próbie "uruchomienia" pliku index.html w Firefoksie nic się nie wyświetla, a w konsoli otrzymuję taki komunikat (po jednym dla każdego modułu, jaki importuję):

Loading failed for the module with source "file:///tutaj/ścieżka/do/pliku.js"
  1. Dlaczego taki błąd występuje?
  2. Jak można temu zaradzić?

Szukałem odpowiedzi w internecie, ale nie znalazłem rozwiązania.


Moja obecna konfiguracja wygląda tak:

  • w pliku index.html:
    <script type="module" src="./index.js"></script>
  • na samej górze pliku index.js:
    import { nazwa-funkcji } from "./ścieżka/do/pliku.js";
    ... (pozostałe importy)
  • w każdym z plików z importowanymi funkcjami:
    export default function(...) {
    ...
    }

Pozostało 580 znaków

2019-07-01 21:04
0

Spróbuj tak:

Index:

<body style="background: darkgoldenrod;">
<script type="module">
import { hello_world } from "../hello12.js";

hello_world();
</script>
</body>

hello12.js:

export function hello_world() {
  console.log('hello');
}

Kluczowa jest ta linia import { hello_world } from "../hello12.js";, zależnie od konfiguracji trzeba dać parę kropek przed ścieżką (jest to chyba relatywna ścieżka) - /* ... */../hello12.js/* ... */.

kurshtml.edu.pl jakearchibald.com

edytowany 5x, ostatnio: Neutral, 2019-07-01 21:11

Pozostało 580 znaków

2019-07-01 21:17
0

Ścieżki wydają mi się poprawne. To jednak może być ten trop, tylko czegoś nie widzę lub nie uwzględniam (poza poprawnością ścieżek).

Jakby co, pliki index.html oraz index.js znajdują się w tej samej lokalizacji.

Spróbowałem teraz z bezpośrednim umieszczeniem importów w elemencie <head> oraz w elemencie <body> w ten sposób:

<head>
  <script type="module">
    import { nazwa-funkcji } from "./ścieżka/do/pliku.js";
    ... (pozostałe importy)
  </script>
</head>

oraz

<body>
  <script type="module">
    import { nazwa-funkcji } from "./ścieżka/do/pliku.js";
    ... (pozostałe importy)
  </script>
</body>

Niestety, oba sposoby zwracają ten sam błąd, co wcześniej (mam nadzieję, że dobrze czytam – zdarzało mi się w przeszłości mylić pojedyncze wyrazy, jak szybko coś czytałem).


edytowany 2x, ostatnio: Silv, 2019-07-01 21:20

Pozostało 580 znaków

2019-07-01 22:16
0

Problemem jest najprawdopodobniej Same Origin Policy.

Plik który otwierasz ma a adresie: file:///
a plik do którego się odwołujesz ma src="./index.js"
więc zdaniem przeglądarki rodzaj protokołu się nie zgadza.


Pozostało 580 znaków

2019-07-01 22:19
1

Ten problem, który u Ciebie występuje to prawie na pewno problem ze ścieżką do pliku. Ja też mam swoje pliki w tej samej lokalizacji i mam napisane dwie kropki przed ścieżką, a nie jedną. Podesłałem link do kursu HTML, w którym to jest opisane (ścieżki do plików).

Struktura plików:

Jakiś wcześniejszy folder/
  hello11.php
  folder11/
    hello12.js

Kod:

import { hello_world } from "../folder11/hello12.js";

Struktura plików:

Jakiś wcześniejszy folder/
  hello12.js
  lisp/
    hello11.php

U mnie te hello11.php, to u Ciebie chyba index.

Pamiętaj też o tym, że do niektórych funkcjonalności, żeby podać nazwę folderu i żeby został on uznany za folder nie za plik bez rozszerzenia, to trzeba napisać nazwę folderu za slash'em na końcu, przykład folder11/ zamiast folder11.

Może te ścieżki (relatywne chyba) zależą od konfiguracji servera, np. Apache.

edytowany 3x, ostatnio: Neutral, 2019-07-01 22:31

Pozostało 580 znaków

2019-07-01 22:32
0

@Freja Draco: nie wiem, czy to to. Jeszcze wcześniej wyskakiwał inny pewien błąd z tym związany (Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...), ale zmieniłem w about:config wartość security.fileuri.strict_origin_policy i zadziałało. Teraz może być z podobnego powodu, nie przeczę, ale komunikat jednak tego nie sugeruje. A i tak nie wiem, jakby to jeszcze ominąć; nawet nie wiem, gdzie próbować na ślepo.


@Neutral: co do kropek: nie spotkałem się z inną interpretacją, niż: dwie kropki oznaczają folder nadrzędny, a jedna – bieżący. Jeśli taką interpretację przyjąć, moje ścieżki są w porządku. Nie przeczę, że może być inaczej w pewnych zastosowaniach, ale nie znam źródeł, które by to potwierdzały. Uzasadnienie wzięte z tego artykułu nt. kropki na stronie LINFO:

On Unix-like operating systems every directory contains, as a minimum, an object represented by a single dot and another represented by two successive dots. The former refers to the directory itself and the latter refers to its parent directory (i.e., the directory that contains it).

Co do folderów, nie kończę żadnej ścieżki folderem – każda kończy się plikiem. Spróbuj u siebie zrobić taki przykład, jak podałem w pierwszym poście. Używam Linuksa, ale mam nadzieję, że to nie ma wpływu.

UPDATE: Piszesz o serwerze Apache, ale ja nie korzystam z żadnego serwera.


UPDATE2: Co ciekawe, gdy np. usuwam ./ z linijki, w której importuję dany moduł w pliku index.js, to Firefox pokazuje inny błąd: TypeError: Error resolving module specifier: ścieżka/bez/kropki/do/pliku.js. Co mogłoby oznaczać, że obecny błąd nie jest związany z możliwością odnalezienia przez Firefox pliku z modułem.


UPDATE3: Hm... to dziwne: gdy usuwam kropkę, jest ten błąd, co wyżej napisałem. Ale gdy podaję błędną ścieżkę, to jest ten sam błąd, co w pierwszym poście. Co oznaczałoby, że jednak Firefox nie może tej ścieżki odnaleźć, choć w komunikacie błędu podaje właściwą. Może coś z protokołem file:///? Czytałem kiedyś gdzieś o tych trzech ukośnikach, ale nie mam obecnie żadnego źródła, które by potwierdzało, że Firefox sam nie radzi sobie z dopasowaniem protokołu (sam, ponieważ ja nigdzie nie specyfikuję file:///).


edytowany 10x, ostatnio: Silv, 2019-07-01 22:45
@Freja Draco, jestem skłonny nawet przyznać Ci rację, że to ma związek z SOP; sugerowałby to komunikat, kiedy mówi o źródle modułu (sam moduł zapewne widzi). - Silv 2019-07-01 22:48

Pozostało 580 znaków

2019-07-01 23:04
1

Cache sprawdź oraz utwórz nowe pliki i spróbuj ponownie, jeśli poniższe rozwiązanie, by nie pomogło.

Gdybyś wykonał, to co ja powyżej używając servera, nie musiałbyś mieszać w ustawieniach przeglądarki, ale mniejsza z tym. Po wyłączeniu tego security.fileuri.strict_origin_policy, czyli ustawienie tego na false z powrotem ustaw tę wartość na true, ponieważ to niepotrzebnie wyłączyłeś. Musisz po prostu napisać taki mniej więcej kod, żeby przeglądarka zczytała wartość z pliku importowanego:

<meta charset="utf-8"/>

<body style="background: darkgoldenrod;">

<script type="module">
import { hello_world } from "file:///C:/Apache24/htdocs/lisp/hello12.js";

hello_world();
</script>
</body>

file:///C:/Apache24/htdocs/lisp/hello12.js:

export function hello_world() {
  console.log('hello55');
}

O ile się nie mylę musisz podać pełną bezwzględną ścieżkę włącznie z file:///..., tak jak u mnie w przykładzie.

handstandsam.com alfilatov.com thepolyglotdeveloper.com

Chrome.exe --disable-web-security

W Google Chrome, żeby to zadziałało, to trzeba chyba uruchomić przeglądarkę ze specjalnym parametrem/parametrami.

Sam w sumie sobie odpowiedziałeś na te zadanie w pierwszym poście (cytat):

W internecie, jak widzę, popularne jest korzystanie z serwera do działania na modułach. Nie chciałbym jednak na razie z niego korzystać, a wolałbym operować na protokole file:///.

Zapomniałeś najwyraźniej o tym protokole "file:///", bo go nigdzie nie dopisałeś do ścieżki. Trzeba go dopisywać do niektórych rzeczy jak w tym przypadku do plików, żeby przeglądarka wiedziała, że ma do czynienia z plikiem, a nie np. ze stroną internetową, czy jeszcze czymś innym. Bez tego "file:///" nie używając servera przeglądarka najprawdopodobniej nie zechce wczytać pliku po słowie kluczowym import import { function1 } from "path_to_file";.

edytowany 12x, ostatnio: Neutral, 2019-07-01 23:32

Pozostało 580 znaków

2019-07-01 23:12

Właśnie ustaliłem, co było powodem: podawałem nazwę funkcji jako nazwę pliku.

To znaczy, to nazwa mojego pliku:

jakis-plik.js

a ja podawałem w ścieżce nazwę taką:

jakisPlik.js

Już raz, pamiętam teraz, zdarzyło mi się popełnić ten błąd. Pewnie to kwestia nieobycia z modułami JavaScriptu i ich składnią. Moja pomyłka może wynikać z tego, że w każdym pliku przechowuję jedną funkcję. Przez to utożsamiam funkcję z modułem, a moduł z plikiem. A przeglądarka mówi, że to jednak nie to samo.

Dziękuję, @Neutral, @Freja Draco. :)


PS. Plik index.js ładował się poprawnie z racji tego, że nie ma funkcji w sobie, a więc nie było z czym pomylić. A nawet gdyby miał funkcję, i tak nazwa byłaby taka sama w przypadku pliku jak w przypadku funkcji. Toteż taka pomyłka może się zdarzyć u mnie jedynie dla plików, które mają w nazwie więcej niż 1 człon (np. dwa wyrazy jakis-plik).


edytowany 4x, ostatnio: Silv, 2019-07-01 23:21
Edytowałem powyższą odpowiedź, nie musisz tego ustawiać na false może być na true. "Po wyłączeniu tego security.fileuri.strict_origin_policy, czyli ustawienie tego na false z powrotem ustaw tę wartość na true, ponieważ to niepotrzebnie wyłączyłeś". - Neutral 2019-07-01 23:26
Rzeczywiście, nie trzeba, dzięki. Ciekawe, czemu wcześniej – jeszcze z błędną ścieżką do pliku – z false Firefox nie pokazywał tego błędu z COR, co napisałem wyżej, a z true już pokazywał? - Silv 2019-07-01 23:32
Wygląda to trochę tak, jakby poprawność/niepoprawność ścieżki do pliku wpływała na interpretację Same-Origin Policy w Firefoksie. - Silv 2019-07-01 23:34
Dzieje się tak chyba dlatego, że ta właściwość wyłącza jakiś moduł z bezpieczeństwa w przeglądarce i wtedy te instrukcje w tej paczce, które odpowiadają za komunikat odnośnie tego są wyłączone i nie ma co zakomunikować o ewentualnym błędzie; ale raczej jest to po prostu nie traktowane jako błąd po wyłączeniu tego. Albo przeglądarka dopuszcza załadowanie jakiegoś pliku bez podania scheme (file, http, data; itp.) - sama się domyśla na podstawie typu jakie to URI, ale to tylko moje domysły. - Neutral 2019-07-01 23:36
Ach, mówisz o sytuacji odwrotnej: że to właśnie SOP umożliwia rozróżnienie między błędną a poprawną ścieżką do pliku? Skoro przy poprawnej ścieżce nie ma błędu COR, a przy błędnej już jest i dopiero po wyłączeniu SOP pojawia się komunikat o błędnej ścieżce... to brzmi rozsądnie. No, ale nadal pewnym być nie można, dopóki się nie przeczyta w dokumentacji lub w kodzie źródłowym. - Silv 2019-07-01 23:45

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0