Preview not working on Next.js site

Developing with Prismic
1

Hi community,

Currently, I'm testing the preview function of Prismic in my dev environment on my Next.js site. I included all scripts as described in the docs and basically, it works fine, and I can preview the page. But when I'm seeing the document that is in draft on the page I'm getting after 1 or 2 seconds the following erros:

route-loader.js?361d:91

GET http://localhost:3000/_next/static/chunks/pages/api/exit-preview.js net::ERR_ABORTED 404 (Not Found)
eval @ route-loader.js:113
appendScript @ route-loader.js:96
maybeExecuteScript @ route-loader.js:210
eval @ route-loader.js:267
Promise.then (async)
eval @ route-loader.js:264
withFuture @ route-loader.js:47
loadRoute @ route-loader.js:263
loadPage @ page-loader.js:126
_callee5$ @ router.js:1381
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
fetchComponent @ router.js:1411
_callee3$ @ router.js:1098
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
getRouteInfo @ router.js:1166
_callee$ @ router.js:791
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:13
_next @ asyncToGenerator.js:25
eval @ asyncToGenerator.js:32
eval @ asyncToGenerator.js:21
change @ router.js:921
push @ router.js:533
instance.<computed> @ router.js:167
_callee$ @ useUpdatePreviewRef.js:81
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:7
_next @ asyncToGenerator.js:29
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:17
_next @ asyncToGenerator.js:29
eval @ asyncToGenerator.js:36
eval @ asyncToGenerator.js:25
updatePreview @ useUpdatePreviewRef.js:107
eval @ useUpdatePreviewRef.js:111
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
eval @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164

Uncaught (in promise) Error: Failed to load script: /_next/static/chunks/pages/api/exit-preview.js
    at HTMLScriptElement.script.onerror (route-loader.js:104:36)

"localhost:3000" is my dev environment, so that's fine. I also check that the route "/api/exit-preview" exists, and it does.

After the errors in the console and from Next.js appears, I'm getting redirected to the 404 page of my site.

Can you help me what causes the issue?

3

Hello Marco,

Thanks for reaching out to us.

To troubleshoot the Preview issue, I need more details:

  1. Code snippets of your page files that have previews configured.
  2. Preview configuration screenshot in your repository.

It would be even better to share your GitHub repo or Zip file of your project. You can send me a private message, though.

Thanks
Priyanka

4

Hello Priyanka,

Thanks for your reply.

Meanwhile I did some testing and found out that the problem is caused by the useUpdatePreviewRef function that runs every second. If I comment that out, it works all fine.

I copied that file from your docs, so it's the same version. The reason why I'm getting redirected to the 404 page is because previewCookieRef in this file is null.

Do you have an idea what could cause this?

UPDATE: previewCookieRef is null because previewCookieObject is undefined and used to declare previewCookieRef

5

@feicht.marco What version of @prismicio/client are you using?

6

In my package.json it's declared as latest. I checked the version with npm outdated and it was v5.1.0. After updating, it's now at v6.1.0. But now I'm getting an error in my Prismic config file TypeError: Cannot read property 'client' of undefined which means that Prismic is not defined in that file (I didn't change anything).

7

Hello @feicht.marco

The latest version of @prismicio/client is V6, and it has a different method to initiate client and queries the API than @prismicio/client V5. We highly recommend updating your project with V6, Although our Next.js documentation is using V5 so far (Our documentation team will update it soon).

We have a technical reference for both versions:
V6: @prismicio/client Technical Reference - Prismic
V5: @prismicio/client Technical Reference - Prismic

It is your choice to use any version until our documentation is updated, but we provide support in both versions. You can again install v5.1.0 and share a project file with me. I'd be happy to look into it.

Thanks,
Priyanka

8

Thank you, @Priyanka ! Now the client is working.

Are there already docs available on how to use the preview function with the v6 of the client?

9

@feicht.marco I am glad that you have migrated your project to client v6. But our docs are still using the old client version.
You can check my response in this thread, where I have shared my project's zip file. It might be helpful for you.

Also, you can check the V6 migration guide on how to enable auto previews.

Let me know if you have any other questions.

Thanks,
Priyanka

10

Now it's working!

The problem was also that the cookie could not be read because my repo name was not declared as a public env variable. That's why the useUpdatePreviewRef always failed.

Thanks for your support @Priyanka !

11

@feicht.marco I am glad that it worked for you. Feel free to reach out to us if you have any questions.