Hello prismic team, I get the following error:
error - unhandledRejection: SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at /Users/guillaumeducuing/lcn/website/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:26:116
at Span.traceAsyncFn (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/trace/trace.js:79:26)
at Object.nextFontLoader (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:15:27)
at LOADER_EXECUTION (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4134)
at runSyncOrAsync (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4145)
at iterateNormalLoaders (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
at /Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5426
at /Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
at eval (eval at create (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), :14:1)
at Array. (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/build/webpack/plugins/profiling-plugin.js:111:29)
at runCallbacks (/Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/webpack/bundle5.js:1:152096)
at /Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/webpack/bundle5.js:1:154008
at /Users/guillaumeducuing/lcn/website/node_modules/next/dist/compiled/webpack/bundle5.js:1:252119
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
when I try to load the dynamic pages of my blog. This bug only occurs on this page [uid].js (my blog pages).
it's curious because everything was working perfectly and this bug appeared all of a sudden.
import { ApiService } from '@/services/api.service'
import { FooterService } from '@/services/footer.service'
import { HeaderService } from '@/services/header.service'
import { PageService } from '@/services/page.service'
import { BlogService } from '@/services/blog.service'
import { getLangFromLocale } from '@/utils/get-lang-from-locale'
import { useRouter } from 'next/router'
import { PrismicText, PrismicRichText } from '@prismicio/react'
import { PrismicNextImage } from '@prismicio/next'
import { SliceZone } from '@prismicio/react'
import { components } from '../../../slices'
import { useState, useEffect } from 'react'
import ScrollProgressBar from 'react-scroll-progress-bar'
import Image from 'next/image'
import SEO from '@/components/SEO'
import format from 'date-fns/format'
import fr from 'date-fns/locale/fr'
import Layout from '@/components/layout'
import styles from '@/styles/pages/blogArticle.module.scss'
import Link from 'next/link'
import Comment from '@/components/Comment'
const Article = ({
header,
footer,
page,
author,
blogCategories,
articles,
user,
signIn,
signOut,
}) => {
const pageUid = page?.uid
const router = useRouter()
const fullUrl = `https://www.lecodeurnormand.fr/${router.asPath}`
const [isScroll, setIsScroll] = useState(false)
const data = page?.data
const myDate = new Date(data?.date || new Date())
const formattedDate = format(myDate, 'dd MMMM yyyy', { locale: fr })
const [maxArticlesNews, setMaxArticlesNews] = useState(3)
const getCategory = (cat) => {
return blogCategories.find((category) => category?.id === cat?.id)
}
const getArticle = (art) => {
return articles.find((article) => article?.id === art?.id)
}
const filteredArticles = articles
const handleSticky = () => {
if (window.scrollY > 950) {
setIsScroll(true)
} else if (window.scrollY < 950) {
setIsScroll(false)
}
}
useEffect(() => {
window.addEventListener('scroll', handleSticky, { passive: true })
return () => {
window.removeEventListener('scroll', handleSticky, { passive: true })
}
}, [])
let words = 0
let rTime = 0
data?.slices2?.forEach((slice) => {
if (slice?.variation === 'text') {
slice?.primary?.txt?.forEach(function (c, i) {
words += c.text.trim().split(/\s+/).length
})
}
})
rTime = Math.ceil(words / 225)
if (data) {
return (
<Layout
header={header}
footer={footer}
user={user}
signIn={signIn}
signOut={signOut}
>
<SEO
title={data?.seo_title}
description={data?.seo_desc}
image={data?.seo_img?.url}
/>
<section className={styles.section_hero}>
<div className={styles.wrapper}>
<div className={styles.container_top}>
<div className={styles.container_left}>
<div className={styles.container_path}>
<Link href="/blog">
<span className={styles.path}>Blog</span>
</Link>
<svg
viewBox="0 0 5 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.477661 7.5125L4.025 3.96516L0.477661 0.557175"
strokeWidth="0.779794"
/>
</svg>
<div className={styles.path}>
<PrismicText field={data?.title} />
</div>
</div>
<div className={styles.container_title}>
<h2>
<PrismicText field={data?.title} />
</h2>
</div>
</div>
<div className={styles.container_right}>
<div className={styles.container_infos}>
<div className={styles.date}>
<span>{formattedDate}</span>
</div>
<div className={styles.sep}>•</div>
<div className={styles.author}>
<Image
unoptimized
src={author.data.img.url}
alt={author.data.img.alt}
width="32"
height="32"
/>
<span>{author?.data?.name}</span>
</div>
</div>
<div className={styles.container_text}>
<PrismicRichText field={data?.txt} />
</div>
</div>
</div>
<div className={styles.container_img}>
<PrismicNextImage field={data?.img} priority={true} />
</div>
</div>
</section>
<section className={styles.section_content}>
<div className={styles.wrapper}>
<div className={styles.content}>
<SliceZone slices={page?.data?.slices2} components={components} />
</div>
<div className={styles.container}>
<aside>
<div
className={`${styles.container_time} ${
isScroll ? styles.style_active : ''
}`}
>
<div className={styles.container_rTime}>
<h5>{data.reading_txt}</h5>
<p>{rTime} min</p>
</div>
<div className={styles.progressbar}>
<div className={styles.fill}>
<ScrollProgressBar />
</div>
</div>
</div>
<div className={styles.container_share}>
<h5>{data.share_txt}</h5>
<div className={styles.container_icons}>
<a
href={
'https://www.facebook.com/sharer/sharer.php?u=' +
fullUrl
}
className={styles.el}
target="_blank"
>
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.2 0H1.8C0.805887 0 0 0.805887 0 1.8V16.2C0 17.1941 0.805887 18 1.8 18H9V11.2235H6.3V8.68235H9V7.31774C9 4.73421 10.3407 3.6 12.5325 3.6C13.5615 3.6 14.1152 3.67328 14.3842 3.70888L14.4 3.71096V6.14118H12.9051C11.9748 6.14118 11.7 6.62231 11.7 7.59642V8.68235H14.3767L14.0066 11.2235H11.7V18H16.2C17.1941 18 18 17.1941 18 16.2V1.8C18 0.805887 17.1941 0 16.2 0Z"
fill="#000000"
/>
</svg>
</a>
<a
href={'https://twitter.com/intent/tweet?url=' + fullUrl}
className={styles.el}
target="_blank"
>
<svg
width="19"
height="18"
viewBox="0 0 19 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.4578 0H2.05781C1.0637 0 0.257812 0.805887 0.257812 1.8V16.2C0.257812 17.1941 1.0637 18 2.05781 18H16.4578C17.4519 18 18.2578 17.1941 18.2578 16.2V1.8C18.2578 0.805887 17.4519 0 16.4578 0ZM14.073 5.61543C14.5959 5.55498 15.0941 5.42098 15.5578 5.22184C15.2113 5.72272 14.7728 6.16269 14.2673 6.51551C14.2722 6.62281 14.2746 6.73058 14.2746 6.83881C14.2746 10.1416 11.6752 13.95 6.92036 13.95C5.46027 13.95 4.10195 13.5363 2.95781 12.8274C3.16037 12.8508 3.36633 12.8625 3.5747 12.8625C4.7862 12.8625 5.90077 12.4628 6.78516 11.7923C5.65411 11.7722 4.69945 11.0492 4.37041 10.0563C4.52791 10.0849 4.69025 10.1009 4.85646 10.1009C5.09246 10.1009 5.32119 10.0704 5.53781 10.0132C4.3549 9.78412 3.46422 8.77392 3.46422 7.56272V7.53133C3.81264 7.71828 4.21146 7.83073 4.635 7.84385C3.94154 7.39592 3.48554 6.63077 3.48554 5.76396C3.48554 5.30525 3.61299 4.87605 3.83493 4.50684C5.11039 6.01932 7.01486 7.01452 9.16307 7.11854C9.11946 6.93627 9.0962 6.7451 9.0962 6.54925C9.0962 5.16937 10.2534 4.05 11.681 4.05C12.4244 4.05 13.0961 4.35362 13.5676 4.83951C14.1568 4.72706 14.7103 4.51902 15.2094 4.23273C15.0165 4.81655 14.607 5.30618 14.073 5.61543Z"
fill="#000000"
/>
</svg>
</a>
<a
href={
'https://www.linkedin.com/sharing/share-offsite/?url=' +
fullUrl
}
className={styles.el}
target="_blank"
>
<svg
width="19"
height="20"
viewBox="0 0 19 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4205 0.871796H1.8594C1.50197 0.871796 1.15918 1.01378 0.906445 1.26652C0.653706 1.51926 0.511719 1.86205 0.511719 2.21947V17.7805C0.511719 18.138 0.653706 18.4807 0.906445 18.7335C1.15918 18.9862 1.50197 19.1282 1.8594 19.1282H17.4205C17.7779 19.1282 18.1207 18.9862 18.3734 18.7335C18.6261 18.4807 18.7681 18.138 18.7681 17.7805V2.21947C18.7681 1.86205 18.6261 1.51926 18.3734 1.26652C18.1207 1.01378 17.7779 0.871796 17.4205 0.871796ZM5.95314 16.424H3.20834V7.70527H5.95314V16.424ZM4.57884 6.49705C4.26749 6.4953 3.96364 6.40135 3.70563 6.22708C3.44762 6.0528 3.24702 5.80599 3.12914 5.51782C3.01126 5.22964 2.98139 4.913 3.0433 4.60786C3.10521 4.30272 3.25612 4.02276 3.47698 3.8033C3.69785 3.58385 3.97877 3.43474 4.2843 3.3748C4.58983 3.31485 4.90627 3.34675 5.19369 3.46648C5.48111 3.5862 5.72662 3.78838 5.89924 4.04751C6.07185 4.30663 6.16385 4.61108 6.1636 4.92244C6.16654 5.13089 6.12748 5.3378 6.04875 5.53084C5.97001 5.72387 5.85323 5.89908 5.70534 6.04602C5.55746 6.19296 5.3815 6.30862 5.18796 6.38611C4.99443 6.4636 4.78727 6.50133 4.57884 6.49705ZM16.0702 16.4316H13.3267V11.6684C13.3267 10.2637 12.7296 9.83012 11.9587 9.83012C11.1448 9.83012 10.3461 10.4437 10.3461 11.7039V16.4316H7.60129V7.71161H10.2409V8.91983H10.2764C10.5413 8.38355 11.4694 7.46692 12.8855 7.46692C14.417 7.46692 16.0715 8.37594 16.0715 11.0383L16.0702 16.4316Z"
fill="#000000"
/>
</svg>
</a>
</div>
</div>
</aside>
</div>
</div>
</section>
<SliceZone
slices={page?.data?.slices4}
components={components}
context={{ articles, blogCategories, author }}
/>
<Comment
user={user}
signIn={signIn}
signOut={signOut}
pageUid={pageUid}
/>
</Layout>
)
}
}
export default Article
export async function getStaticProps({ locale, params, previewData }) {
ApiService.setPreviewData({ previewData })
const lang = getLangFromLocale(locale)
const headerService = new HeaderService(lang)
const footerService = new FooterService(lang)
const pageService = new PageService(lang)
const blogService = new BlogService(lang)
const [header, footer, page, articles, blogCategories, authors] =
await Promise.all([
headerService.getHeader(),
footerService.getFooter(),
pageService?.getBlogArticlePage(params.uid),
blogService?.getAllBlogArticle(),
// blogService.getAllBlogCategories(),
blogService?.getAllBlogAuthor(),
])
const author = await pageService.getBlogAuthors(page.data.author.uid)
return {
props: {
header,
footer,
page: page || null,
articles: articles || null,
blogCategories: blogCategories || null,
author: author || null,
},
revalidate: 180,
}
}
export async function getStaticPaths() {
const apiService = ApiService.getInstance()
const pages = await apiService?.getAllBlogArticle({ lang: '*' })
const paths = pages?.map((page) => ({
params: {
uid: page?.uid,
},
locale: page?.lang,
}))
return { paths, fallback: true }
}
I've tried to reinstall npm with no success
(I also have other [uid] pages but they are not affected. If you want more info, I can add you to my private repo?
Thank you for your answer !