Попытка развернуть сайт Gatsby с помощью Contentful CMS. В режиме разработки все работает отлично, когда я пытаюсь собрать, все становится не так.
Команда сборки Gatsby развертывает сайт, сначала все выглядит нормально, но выдает ошибки, мешающие загрузке моего контента.
Проще всего показать, что это просто проверить мой github LIVE:
GIT LIVE
Краткое описание: похоже на ошибку пути к файлам - при попытке получить файлы по прямому пути (локальный F: \ path для меня -> моя главная страница github для git LIVE (name.github.io/...))
У меня та же проблема со встроенным веб-сайтом Gatsby.
Мой (необработанный) главный сайт Гэтсби выглядит так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
<link rel="preload" href="/component---src-pages-index-js-df93eb0c88a52638909b.js" as="script" />
<link rel="preload" href="/path---index-a0e39f21c11f6a62c5ab.js" as="script" />
<link rel="preload" href="/app-29169f9e7be0e183bc9a.js" as="script" />
<link rel="preload" href="/commons-fcbb8af1639fee4f6844.js" as="script" />
<title data-react-helmet="true">Gatsby Default Starter</title>
<meta data-react-helmet="true" name="description" content="Sample" />
<meta data-react-helmet="true" name="keywords" content="sample, something" />
<style id="gatsby-inlined-css">
</style>
</head>
<body>
<div id="___gatsby">
<div data-reactroot="" data-reactid="1" data-react-checksum="238678071">
<!-- react-empty: 2 -->
<div style="background:rebeccapurple;margin-bottom:1.45rem;" data-reactid="3">
<div style="margin:0 auto;max-width:960px;padding:1.45rem 1.0875rem;" data-reactid="4">
<h1 style="margin:0;" data-reactid="5"><a style="color:white;text-decoration:none;" href="/" data-reactid="6">Gatsby
Default Starter</a></h1>
</div>
</div>
<div style="margin:0 auto;max-width:960px;padding:0px 1.0875rem 1.45rem;padding-top:0;" data-reactid="7">
<div data-reactid="8">
<h1 data-reactid="9">Hi people</h1>
<p data-reactid="10">Welcome to your new Gatsby site.</p>
<p data-reactid="11">Now go build something great.</p><a href="/page-2/" data-reactid="12">Go to page 2</a>
</div>
</div>
</div>
</div>
<script id="webpack-manifest">
/*<![CDATA[*/
window.webpackManifest = {
"231608221292675": "app-29169f9e7be0e183bc9a.js",
"162898551421021": "component---src-pages-404-js-4503918ea3a16cfcdb75.js",
"35783957827783": "component---src-pages-index-js-df93eb0c88a52638909b.js",
"218538773642512": "component---src-pages-page-2-js-1d4f0f19c1c44398ab65.js",
"60335399758886": "path----cac63ff5c1b42581353c.js",
"254022195166212": "path---404-a0e39f21c11f6a62c5ab.js",
"142629428675168": "path---index-a0e39f21c11f6a62c5ab.js",
"135728916539164": "path---page-2-a0e39f21c11f6a62c5ab.js",
"178698757827068": "path---404-html-a0e39f21c11f6a62c5ab.js",
"114276838955818": "component---src-layouts-index-js-07253e04741551c85ebc.js"
} /*]]>*/
</script>
<script>
/*<![CDATA[*/
["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
"/component---src-pages-index-js-df93eb0c88a52638909b.js",
"/component---src-layouts-index-js-07253e04741551c85ebc.js"
].forEach(function (s) {
document.write('<script src="' + s + '" defer></' + 'script>')
}) /*]]>*/
</script>
</body>
</html>
Разрешение пути вручную, например, замена ссылки href следующим образом:
<link rel="preload" href="/component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
в (просто добавление точки)
<link rel="preload" href="./component---src-layouts-index-js-07253e04741551c85ebc.js" as="script" />
устраняет эту конкретную ошибку, выдавая предупреждение, как показано ниже:
The resource file://(path here) was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
и еще одна ошибка (больше не указывает на строку из HTML HEAD, а на последний скрипт (подписанный как CDATA)
<script>
/*<![CDATA[*/
["/commons-fcbb8af1639fee4f6844.js", "/app-29169f9e7be0e183bc9a.js", "/path---index-a0e39f21c11f6a62c5ab.js",
"/component---src-pages-index-js-df93eb0c88a52638909b.js",
"/component---src-layouts-index-js-07253e04741551c85ebc.js"
].forEach(function (s) {
document.write('<script src="' + s + '" defer></' + 'script>')
}) /*]]>*/
</script>
Идем дальше - изменение пути создает еще одну «забавную» вещь.
При попытке загрузить страницу, он «мигает» сайтом со стилями и всем (только на долю секунды), а затем выдает несколько ошибок, таких как
A page wasn't found for "/F:/HTML/TEST-2/site/public/index.html
bundle loading error true
Loading the component for /404.html failed
bundle loading error true
Loading the JSON for /404.html failed
Я знаю, что я не должен делать все это в процессе работы, но я понятия не имею, в чем проблема.
Надеюсь, я прояснил свою проблему:)