Slavný Resolve Url Loader, zvláštní problém, na který jsem narazil, když jsem se poprvé pokoušel spustit projekt reakce v mém nově nainstalovaném vývojovém prostředí. Pokud vás všechny tyto podrobnosti zajímají, můžete si v tomto článku přečíst o okolnostech, za kterých jsem narazil na tuto chybu.
Takové chyby by vás samozřejmě přiměly zahájit důkladný a hluboký průzkum na webu, abyste věděli, proč a kdy a co je důležitější, JAK to vyřešit. Už jsem to udělal a po vyzkoušení většiny návrhů, i když pro některé vývojáře fungovaly, v mém případě nefungovaly. Způsob, jakým jsem tento problém ve svém projektu vyřešil, byl docela jedinečný, a proto jsem se rozhodl jej sdílet na svém blogu.
Jsem rád, že jste zde, a doufám, že vám tento obsah bude užitečný. Bez dalších řečí pojďme k řešení!
protože jsem se pokoušel spustit existující projekt, který jsem právě naklonoval z Githubu, spustil jsem všechny požadované příkazy jako :
- Instalace příze
- Upgrade příze
- reakční skripty pro přidání příze
- Sestavení příze
- Začátek příze
Jakmile jsem spustil projekt, tento problém se objevil pokaždé, bez ohledu na to, jaké opravy jsem zkusil, takže jsem se vrátil a četl soubory řádek po řádku. Při procházení souboru Package.json jsem si všiml, že některé balíčky nebyly upgradovány, konkrétně balíček reakce-scripts. Jedná se o sadu skriptů poskytovaných startovacím balíčkem create-react-app, který umožňuje spouštění aplikací React bez velké konfigurace. Tato schopnost přichází ve formě několika funkcí, které zahrnují CSS s automatickou předponou. A pokud si pozorně přečtete podrobnosti o chybě, uvidíte, že problém je odhalen v jednom ze souborů CSS. Samozřejmě jsem v rámci vyšetřování chyby změnil odkazy na soubory CSS, odinstaloval, znovu nainstaloval, aktualizoval balíček node-sass a resolve-URL-loader, ale bez úspěchu.
Pro začátek se pojďme podívat na CSS Autoprefixer , co to je a co dělá? a proč nám to brání v úspěšném budování našeho nově vytvořeného/klonovaného projektu?
Co je to CSS AutoPrefixer?
Je to postprocesor CSS, který analyzuje zkompilované soubory CSS a kontroluje je proti službě caniuse, aby mohl spravovat předpony související s každým dodavatelem.
Co je role automatického prefixu?
Řeší problém, se kterým se setkáváme s předponami dodavatele, které musíme aplikovat na pravidla CSS, abychom zpřístupnili některé styly voleb většímu počtu uživatelů v různých prohlížečích.
Pokud se vám to zdá jako složité vysvětlení, zde je to krátké a jasné:Autoprefixer se stará o váš kód CSS, který vám brání zapamatovat si/přidat/odebrat/kontrolovat předpony dodavatelů.
jaký je problém s automatickým prefixem?
při spouštění nového projektu React budete muset nainstalovat balíček reakce-scripts, který obsahuje balíček resolve-URL-loader, druhá role zahrnuje správu a přesměrování souborů CSS. Spojením teček můžeme pochopit, že operace správy souborů CSS zahrnuje službu automatického přidělování předpon. Předchozí verze balíčku resolve-URL-loader využívaly Přepracování Analyzátor CSS, ale protože není přizpůsoben ke správě moderních verzí CSS, přijal balíček, který nás zajímá, PostCSS analyzátor ve výchozím nastavení. Stručně řečeno, problém s předmětem byl důsledkem špatné konfigurace a správy souborů CSS způsobených programem Resolve-Url-Loader, který je součástí balíčku reakce-scripts. Protože moje vývojové prostředí bylo nově nainstalováno. Používal jsem nejnovější verzi příze a upgradoval jsem všechny balíčky, což způsobilo problém.
Jak jsem situaci vyřešil?
Když jsem četl soubor Package.Json hřebenem s jemnými zuby, zjistil jsem, že nepoužívám stejné reakční skripty, které můj tým používal na předmětném projektu. Dobře mi posloužilo odinstalování stávajícího balíčku respond-scripts a instalace toho správného.
Takže tady končí mé problémy s frontendovým projektem, který jsem postavil a úspěšně začal. Z hloubi mého srdce se zvedl povzdech uspokojení, ale nestalo se tak, protože projekt Backend vyvinutý pomocí jazyka C#, který běžel bezchybně, spouštěl novou chybu zprávy, jejíž náprava trvala téměř dva dny. a řešení nebylo běžnější než řešení popsané v tomto článku.
Děkujeme, že jste dočetli až sem, a pokud jste ochotni se dozvědět o další chybě v projektu .Net, stačí kliknout na další článek.