Next.JS / Prismic Preview gives 500 FUNCTION_INVOCATION_FAILED on non-allowed domains

Developing with Prismic
1

Hello everyone,

I am currently testing the preview function of Prismic + Next.JS and although it works flawlessly in our allowed domain http://localhost:3000, if I try to access the page that is being previewed on a non-allowed domain deployed on production vercel (http://www.example.com) I get the following error: 500: INTERNAL_SERVER_ERROR
Code: FUNCTION_INVOCATION_FAILED

Screenshot 2022-07-14 at 20.23.56
Screenshot 2022-07-14 at 20.23.56714×626 37.3 KB

I have reviewed the Previews configuration based on whats available here and the forums, with some slight changes due to us using prismicio/client v6 but it still shows this error.

The Vercel logs don't show nothing relevant.

Although this doesn't break the website in production this is cumbersome for someone that is using the Preview in the same browser to compare between the Preview to what's already in production.

This issue also forces the user to delete the Prismic cookies manually for the website that is returning the 500.

Below you can find our files: prismicio.js and package.json:
prismicio.js (1003 Bytes)
package.json.zip (745 Bytes)

Did anyone had some problems like mine? Can you help?

Thank you. Best regards,
Joel Oliveira

2

Further investigating this problem it seems like that is happening when the page is deployed on Vercel and is independent of it being on the Preview allowed domains.

I can easily replicate this in the following ways:

  • Preview to localhost:3000, if I open the Vercel deployed version of the site (https://example-website-24axq7lj0.vercel.app/) on the same browser, it will share the cookies, try to render preview, and it'll get the error mentioned above

  • Preview to the Vercel deployed version of the site, will use the cookies as expected and it'll end in the error as mentioned

Error on Vercel Functions tab

2022-07-15T13:55:20.172Z	120abd26-6f37-4bc2-9ad9-4e9ca794ecb4	ERROR	Error: Cannot find module '/var/task/node_modules/three/build/three.cjs'
    at createEsmNotFoundErr (internal/modules/cjs/loader.js:929:15)
    at finalizeEsmResolution (internal/modules/cjs/loader.js:922:15)
    at resolveExports (internal/modules/cjs/loader.js:450:14)
    at Function.Module._findPath (internal/modules/cjs/loader.js:490:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:888:27)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at /var/task/node_modules/postprocessing/build/postprocessing.js:164:24
    at Object.<anonymous> (/var/task/node_modules/postprocessing/build/postprocessing.js:7466:3) {
  code: 'MODULE_NOT_FOUND',
  path: '/var/task/node_modules/three/package.json',
  page: '/'
}
RequestId: 120abd26-6f37-4bc2-9ad9-4e9ca794ecb4 Error: Runtime exited with error: exit status 1
Runtime.ExitError

In this error it looks like it's a problem with Three three - npm but this only occurs when I have Prismic Preview active for a page.

If I access the page without having Prismic Preview active it doesn't crash and there's no error displayed on Vercel.

Can you help? Thank you

3

I've managed to fix this.

I've misread the logs and this was instead related to the postprocessing postprocessing - npm and not with Three.

Removing the use of this library resolved the issue.

Thank you for anyone who read this and spent some time thinking on this.

Best regards :slight_smile:

5

Hello @joel

I am glad that you managed to solve the issue. Thanks for sharing the solution here. It might be helpful for others.

Let us know if you need any other help.

Thanks,
Priyanka