Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Next JS Preview Mode does not work in Chrome, Safari, Canary, Firefox(v72.02) #18155

Closed
gitabhisingh opened this issue Oct 23, 2020 · 3 comments
Closed

Next JS Preview Mode does not work in Chrome, Safari, Canary, Firefox(v72.02) #18155

gitabhisingh opened this issue Oct 23, 2020 · 3 comments

Comments

@gitabhisingh
Copy link

gitabhisingh commented Oct 23, 2020 •
edited
Loading

Bug report

Next JS Preview Mode does not work in Chrome, Safari, Canary, Firefox(v72.02).
Works in Firefox(v81.01 and above)

Describe the bug

A clear and concise description of what the bug is.
I am working on a Project which uses Contentful CMS and builds multiple static public pages using single slug file. I followed the Next JS Contentful example: https://github.com/vercel/next.js/tree/canary/examples/cms-contentful/
I am able to use the preview mode on Dev(localhost), while making a production build (localhost), the cookies are not being set and the code is not able to enable the preview mode.

Building static pages pages/posts/[slug.js] and pages/api/preview.js is server side rendered for preview mode

Enabling preview mode:

  // Setting the cookies
  res.setPreviewData({})

  // Redirect to the path from the fetched post
  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
  // res.writeHead(307, { Location: `/posts/${post.slug}` })
  const url = `/posts/${post.slug}`
  res.write(
    `<!DOCTYPE html><html><head><meta http-equiv="Refresh" content="0; url=${url}" />
    <script>window.location.href = '${url}'</script>
    </head>`
  )
  res.end()

Passing context to getStaticProps after setting the cookies:

export async function getStaticProps({ params, preview = false }) {
  const data = await getPostAndMorePosts(params.slug, preview)

  return {
    props: {
      preview,
      post: data?.post ?? null,
      morePosts: data?.morePosts ?? null,
    },
  }
}

export async function getStaticPaths() {
  const allPosts = await getAllPostsWithSlug()
  return {
    paths: allPosts?.map(({ slug }) => `/posts/${slug}`) ?? [],
    fallback: true,
  }
}

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Go to CMS Contentful Example by Next JS
  2. Replace .env with your contentful tokens, and create modals and posts using readme file
  3. yarn build
  4. yarn start
  5. Open Preview URL
  6. Preview mode = Disabled

Preview mode is enabled while on dev build(localhost), but not on prod build(localhost)

Expected behavior

A clear and concise description of what you expected to happen.

Preview Mode should be enabled

Screenshots

If applicable, add screenshots to help explain your problem.

System information

  • OS: macOS
  • Browser (if applies) Google Chrome (86.0.4240.80), Safari, Firefox(v72.02)
  • Version of Next.js: 9.5.2
  • Version of Node.js: 14.4.0

Additional context

Add any other context about the problem here.
The issue seems to be cookie issue. The cookies are not being set in the browsers provided, and works in Firefox latest version. The cookies are not being set in these browsers causing Preview Mode not to work as intended: https://nextjs.org/docs/advanced-features/preview-mode.

Any solution to the issue would be appreciated, meanwhile I am thinking to use the pages/api/preview.js as a server side rendered page to hit an api run time and act as preview page. :)
This was referenced Oct 23, 2020
Closed
Closed
@gitabhisingh
Copy link
Author

gitabhisingh commented Oct 23, 2020 •
edited
Loading

After curl I found out that cookies are being set but in SameSite=None mode. Is that the issue?
I am using Next JS v9.5.2

 HTTP/1.1 200 OK
HTTP/1.1 200 OK
< Set-Cookie: __prerender_bypass=e00e4ba3b660386df18eea2687f9b75; Path=/; HttpOnly; Secure; SameSite=None
Set-Cookie: __prerender_bypass=e00e4ba3b660386ef18eea2687f9b75; Path=/; HttpOnly; Secure; SameSite=None
< Set-Cookie: __next_preview_data=eyJhbGciOiJIUzI1NiIsInR5cI6IkpXVCJ9.eyJkYXRhIjoiYTU0NWQyN2RkZTM1ZTBiNjhiNzE3MTBkOWMxZjBmMGVlZDU3ZjEwMGQ5ZmExZTIxYmRjMDliMDY4Yjc5ODA1MWNlYzdhYWU1OWY5MzY1MTI5Y2RiMTNlZTA2OTM3M2ZhYjVkYjQ3NjYxYjdlMTkzMThhNmM4N2MxY2MzZTI3NDVhND4YjI0ZjllODgxN2I2OWYxODdhMTFhYjE0YzUyNzE0ZDQ0NDI4OTI1MWVhOTg1MDdkNWZlMDZkNThiNmUzMzI2MSIsImlhdCI6MTYwMzQ2NzA2Nn0.V4IpUW7V_goPgiJ5mV6-axAKQcMFxqNXwUQqVp6nfA; Path=/; HttpOnly; Secure; SameSite=None
Set-Cookie: __next_preview_data=eyJhbGciOiJIUzI1NisInR5cCI6IkpXVCJ9.eyJkYXRhIjoiYTU0NWQyN2RkZTM1ZTBiNjhiNzE3MTBkOWMxZjBmMGVlZDU3ZjEwMGQ5ZmExZTIxYmRjMDliMDY4Yjc5ODA1MWNlYzdhYWU1OWY5MzY1MTI5Y2RiMTNlZTA2OTM3M2ZhYjVkYjQ3NjYxYjdlMTkzMThhNmM4N2MxY2MzZTI3NDVhNDk4YjI0ZjllODgxN2I2OWYxODdhMTFhYjE0YzUyNzE0ZDQ0NDI4OTI1MWVhOTg1MDdkNWZlMDZkNThiNmUzMzI2MSIsmlhdCI6MTYwMzQ2NzA2Nn0.V4IpUW7V_goPgiJ5mV6-axAKQcMFxqNXwWQqVp6nfA; Path=/; HttpOnly; Secure; SameSite=None
< Date: Fri, 23 Oct 2020 15:31:06 GMT
Date: Fri, 23 Oct 2020 15:31:06 GMT
< Connection: keep-alive
Connection: keep-alive
< Transfer-Encoding: chunked
Transfer-Encoding: chunked

< 
<!DOCTYPE html><html><head><meta http-equiv="Refresh" content="0; url=/posts/everything-you-want-to-know" />
    <script>window.location.href = '/posts/everything-you-want-to-know'</script>
* Connection #0 to host localhost left intact
    </head>* Closing connection 0

@shawner18
Copy link

@shinesingh1994 Make sure your NODE_ENV is set to development

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gitabhisingh @balazsorban44 @shawner18