Prismic Preview returns 500 internal error on translated language page

Developing with Prismic
,
1

Hi everyone,
I am experiencing this issue where Preview Mode does not work correctly in both production and local when trying to preview a non-english document - it returns a 500 internal error on the preview url. It's working fine on english documents.

And there was an error saying:
TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Location"] at ServerResponse.setHeader (_http_outgoing.js:533:3)

Example of the url after click on preview: http://localhost:3000/api/preview/?token=https://xxx.prismic.io/previews/Yth8ghEAACcA-Kf1?websitePreviewId=Ys5PKBEAACYAyxzH&documentId=YthH2hEAACkA98HN

My linkResolver function:

export const linkResolver: LinkResolver = doc => {
switch (doc.type) {
case 'course':
return /course/${encodeURIComponent(doc.uid)};
}
}

My folder structure under pages:
-- ru
----[encoded russian folder name]
------- [slug].tsx
------- index.tsx
-- zh
----[encoded chinese folder name]
------- [slug].tsx
------- index.tsx

My package.json:
"@prismicio/client": "6.6.1",
"@prismicio/helpers": "2.3.1",
"@prismicio/next": "0.1.3",
"@prismicio/react": "2.4.2",

What am I missing here?
Thanks!

3

Hello @patrickzsy

Thanks for reaching out to us.

To debug it, I need more information:

  1. How did you implement i18n in the next.config.js file?
  2. Are you passing locale parameter in getStaticProps() function?

Thanks,
Priyanka

4

Hi @Priyanka,
Thanks for your reply.
My next.config.js:

i18n: { 
    locales: ['en', 'ar', 'de', 'fr', 'es', 'id', 'it', 'nl', 'tr', 'ja', 'pt-br', 'pt-pt', 'zh'],
    localeDetection: false,
    defaultLocale: 'en'
  }

I am also passing options: {lang: ar} as part of my getServerSideProps(). I could access the url by manually input the slug uid but it returns 500 with error Invalid character in header content ["Location"] when trying to preview locally and production.

Also I have another question about the how can I access translated document with non-english characters in the url, i.e. www.example.com/zh/课程收藏/. Right now I am putting encoded characters are part of my folder name: zh/%E8%AF%BE%E7%A8%8B%E6%94%B6%E8%97%8F but this will stop working as soon as I add i18n config as I pasted above in my next.config.js.

5

Hello @patrickzsy

Have you tried to clear cookies in another language?

6

Hi @Priyanka , I have tried to clear all the prismic cookie but still returns 500 on the pages which have encoded ascii as part of the url.

7

Hello @patrickzsy,

I am unsure what might be causing the issue. I need to dig deeper. For this, I need your project source code. You can send me a private message, though.

Thanks,
Priyanka

8

@patrickzsy are you still having this issue? what do you see if you log the alternate_languages content in your console?

10

Hi @Pau , Thanks for the reaching out. I am still getting TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Location"] when hitting await redirectToPreviewURL() in api/preview.ts

More details:

TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Location"]
    at ServerResponse.setHeader (_http_outgoing.js:533:3)
    at setHeadersFromObject (node_modules/next/dist/compiled/compression/index.js:1:155900)
    at ServerResponse.setWriteHeadHeaders (node_modules/next/dist/compiled/compression/index.js:1:156134)
    at ServerResponse.writeHead (node_modules/next/dist/compiled/compression/index.js:1:155341)
    at redirect (node_modules/next/dist/next-server/server/api-utils.js:27:357)
    at ServerResponse.apiRes.redirect (node_modules/next/dist/next-server/server/api-utils.js:6:354)
    at redirectToPreviewURL (webpack-internal:///../../node_modules/@prismicio/next/dist/index.js:147:16)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Preview (webpack-internal:///./pages/api/preview.ts:18:3) {
  code: 'ERR_INVALID_CHAR'
11

Hey @patrickzsy. From what I can see in different posts online it may be related to a config typo in your setup. It's not related to your repository.