500 Unexpected token < in JSON at position 0 отображается кратко с ошибкой компонента при посещении сайта / блога.
- Вкладка "Сеть" показывает GET блог. json 404
в продукт:
работа.
- Все маршруты работают локально.
Похоже на выпуск 861
Вот код
In в частности, эти блоки кода вызывают сбой маршрута.
index.svelte
<script context="module">
export function preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
});
}
</script>
index. json. js
import posts from './_posts.js';
const contents = JSON.stringify(posts.map(post => {
return {
title: post.title,
slug: post.slug
};
}));
export function get(req, res) {
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(contents);
}
[slug] .svelte
<script context="module">
export async function preload({ params, query }) {
const res = await this.fetch(`blog/${params.slug}.json`);
const data = await res.json();
if (res.status === 200) {
return { post: data };
} else {
this.error(res.status, data.message);
}
}
</script>
трудно отладить, поскольку требует развертывания, поскольку он работает локально:
регистрация выходных данных кода в dev.
index.json.js [
{
title: 'What is Sapper?',
slug: 'what-is-sapper',
html: '\n' +
"<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript.
If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p>\n" +
'\n' +
"<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p>\n" +
'\n' +
'<ul>\n' +
'\t<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li>\n' +
'\t<li>Server-side rendering (SSR) with client-side hydration</li>\n' +
'\t<li>Service worker for offline support, and all the PWA bells and whistles</li>\n' +
"\t<li>The nicest development experience you've ever had, or your money back</li>\n" +
'</ul>\n' +
'\n' +
"<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p>\n"
+
'\t\t'
},
{
title: 'How to use Sapper',
slug: 'how-to-use-sapper',
html: '\n' +
'<h2>Step one</h2>\n' +
"<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p>\n" +
'\n' +
'<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app\n' +
'cd my-app\n' +
'npm install # or yarn!\n' +
'npm run dev\n' +
'
\ n '+' \ n '+'
Шаг два
\ n '+ "
Go для localhost: 3000 . Откройте my-app в вашем редакторе. Отредактируйте файлы в каталоге src/routes или добавьте новый единицы.
\ n "+ '\ n' + '
Шаг третий
\ n' + '
...
\ n' + '\ n' + '
Шаг четвертый
\ n '+'
Сопротивление o форматы шутки вердона.
\ n '+' \ t \ t '}, {title:' Почему имя? ', slug:' Why-the-name ', html:' \ n '+'
На войне солдаты, которые строят мосты, ремонтируют дороги, очищают минные поля и проводят сносы - все в боевых условиях - известны как саперы .
\ n '+' \ n '+'
Для веб-разработчиков ставки обычно ниже, чем для боевых инженеров. Но мы сталкиваемся с нашей собственной враждебной средой: недостаточно мощными устройствами, плохими сетевыми подключениями и сложностью, свойственной интерфейсному проектированию. Сапер, что коротко для S Velte приложение Мак Er , ваш мужественный и послушный союзник.
\ n '+' \ t \ t ' }, {title: 'Чем Sapper отличается от Next. js?', slug: 'how-is-sapper-different-from-next', html: '\ n' + "
Next. js является платформой React от Zeit и является источником вдохновения для Саппера. Однако есть несколько заметных отличий:
\ n "+ '\ n' + '
- Он работает на Svelte вместо React, поэтому он быстрее и ваши приложения меньше
- Вместо маскирования маршрута мы кодируем параметры маршрута в Например, страница, на которую вы сейчас смотрите, это
src/routes/blog/[slug].html - . Кроме страниц (компоненты Svelte, которые отображаются на сервере или клиенте), вы можете создать серверные маршруты в вашем каталоге
routes Это просто .js файлы, которые экспортируют функции, соответствующие методам HTTP, и получают в качестве аргументов объекты Express request и response. легко, fo Например, добавьте API JSON, такой как тот, который запитывает эту страницу - Ссылки - это просто
<a> элементы, а не рамки-спецификации c <Link> комплектующие. Это означает, например, что эта ссылка , несмотря на то, что она находится внутри двоичного объекта HTML, работает с маршрутизатором так, как вы ожидаете.
\ n' + '\ t \ t'}, {title: 'Как я могу принять участие?', slug: 'how-can-i-get-вовлечен', html: '\ n' + "
Мы так рада, что ты спросил! Заходите в репозитории Svelte и Sapper и присоединяйтесь к нам в чате Discord . Добро пожаловать всем, особенно вам!
\ n "+ '\ t \ t'}] index.svelte [{title: 'Что такое Sapper?', Slug: 'what-is-sapper'}, {title: 'Как использовать Sapper', slug: 'how-to-use-sapper'}, {title: 'Почему имя?', Slug: 'Why-the-name'}, {title: 'Чем Sapper отличается от Next. js? ', Slug:' how-is-sapper-different-from-next '}, {title:' Как я могу принять участие? ', Slug:' how-can-i-get-connected ' }] index.svelte [{title: 'Что такое Sapper?', slug: 'what-is-sapper'}, {title: 'Как использовать Sapper', slug: 'how-to-use-sapper'}, {title : 'Почему имя?', Slug: 'Why-the-name'}, {title: 'Чем Саппер отличается от Next. js?', Slug: 'how-is-sapper-different-from-next '}, {title:' Как я могу принять участие? ', slug:' how-can-i-get-задействованный '}]