Error using Preview mode: ReferenceError: locale is not defined

[m8ker]

I set this starter project up locally with no customization, and I'm having issues getting preview mode to work. I get this error:

[develop:frontend] error - ReferenceError: locale is not defined
[develop:frontend]     at preview (C:\Users\username\Projects\projectname\frontend\.next\server\pages\api
\preview.js:36:5)
[develop:frontend]     at Object.apiResolver (C:\Users\username\Projects\projectname\frontend\node_module
s\next\dist\server\api-utils.js:101:15)
[develop:frontend]     at runMicrotasks (<anonymous>)
[develop:frontend]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[develop:frontend]     at async DevServer.handleApiRequest (C:\Users\username\Projects\projectname\fronte
nd\node_modules\next\dist\server\next-server.js:775:9)
[develop:frontend]     at async Object.fn (C:\Users\username\Projects\projectname\frontend\node_modules\n
ext\dist\server\next-server.js:666:37)
[develop:frontend]     at async Router.execute (C:\Users\username\Projects\projectname\frontend\node_modu
les\next\dist\server\router.js:205:32)
[develop:frontend]     at async DevServer.run (C:\Users\username\Projects\projectname\frontend\node_modul
es\next\dist\server\next-server.js:846:29)
[develop:frontend]     at async DevServer.run (C:\Users\username\Projects\projectname\frontend\node_modul
es\next\dist\server\dev\next-dev-server.js:355:20)
[develop:frontend]     at async DevServer.handleRequest (C:\Users\username\Projects\projectname\frontend\
node_modules\next\dist\server\next-server.js:292:20) {
[develop:frontend]   page: '/api/preview'
[develop:frontend] }
[develop:backend ] [2022-02-09 09:48:13.162] http: POST /graphql (9 ms) 400
[develop:frontend] TypeError: Cannot read property 'global' of undefined
[develop:frontend]     at getGlobalData (C:\Users\username\Projects\projectname\frontend\.next\server\pag
es\_app.js:628:22)
[develop:frontend]     at runMicrotasks (<anonymous>)
[develop:frontend]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[develop:frontend]     at async Function.MyApp.getInitialProps (C:\Users\username\Projects\projectname\fr
ontend\.next\server\pages\_app.js:249:24)
[develop:frontend]     at async Object.loadGetInitialProps (C:\Users\username\Projects\projectname\fronte
nd\node_modules\next\dist\shared\lib\utils.js:69:19)
[develop:frontend]     at async Object.renderToHTML (C:\Users\username\Projects\projectname\frontend\node
_modules\next\dist\server\render.js:314:17)
[develop:frontend]     at async doRender (C:\Users\username\Projects\projectname\frontend\node_modules\ne
xt\dist\server\next-server.js:1149:38)
[develop:frontend]     at async C:\Users\username\Projects\projectname\frontend\node_modules\next\dist\se
rver\next-server.js:1241:28
[develop:frontend]     at async C:\Users\username\Projects\projectname\frontend\node_modules\next\dist\se
rver\response-cache.js:64:36

Has anyone else encountered this? Is the localization plugin compatible with preview mode?

I tried to add a parameter to my preview url but it had no effect:

http://localhost:3000/api/preview?locale=en&secret=xxxxxxxxxxxxxxxxx&slug=secret

Windows 11
Node.js v14.18.3

[anjum121]

You need to update pages/api/preview.js as follows, pay attention to localeID also pageData.attributes.locale

http://localhost:3000/api/preview?&secret=abced&slug=secret&locale=en

 import { getPageData } from "utils/api"
import { parseCookies } from "utils/parse-cookies"

const preview = async (req, res) => {
  // Check the secret and next parameters
  // This secret should only be known to this API route and the CMS
  if (req.query.secret !== (process.env.PREVIEW_SECRET || "secret-token")) {
    return res.status(401).json({ message: "Invalid token" })
  }

  const cookies = parseCookies(req)
  const slugArray = req.query.slug.split("/")
  const localeID = req.query.locale || "en"
  // Fetch the headless CMS to check if the provided `slug` exists
  const pageData = await getPageData({
    locale: localeID,
    slug: slugArray.join("/"),
    preview: true,
  })

  // If the slug doesn't exist prevent preview mode from being enabled
  if (!pageData) {
    return res.status(401).json({ message: "Invalid slug" })
  }

  // Enable Preview Mode by 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
  // Prefix with locale so previews are available in all languages
  res.writeHead(307, {
    Location: `/${pageData.attributes.locale}/${pageData.attributes.slug}`,
  })
  res.end()
}

export default preview

// You can view Preview pages with URLs like this:
// http://localhost:3000/api/preview?secret=<preview-secret>&slug=<slug>
// where <preview-secret> is the secret token defined in your .env config
// and where <slug> is the slug you entered in Strapi for your page
// The slug must match the current locale