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

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(...) {
  ...
}
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

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).

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.

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.

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:///).

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";.

0

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).

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