2

After upgrading from JSS 20 to JSS 21, we are unable to open pages in Experience Editor.

EE error

Our rendering host is Vercel and there are several errors in the logs:

Error 1:

T',
  maxHeaderSize: undefined,
  insecureHTTPParser: undefined,
  joinDuplicateHeaders: undefined,
  path: '/?timestamp=1708526618306',
  _ended: true,
  res: [IncomingMessage],
  aborted: false,
  timeoutCb: null,
  upgradeOrConnect: false,
  parser: null,
  maxHeadersCount: null,
  reusedSocket: false,
  host: 'clientname.vercel.app',
  protocol: 'https:',
  _redirectable: [Writable],
  [Symbol(kCapture)]: false,
  [Symbol(kBytesWritten)]: 0,
  [Symbol(kNeedDrain)]: false,
  [Symbol(corked)]: 0,
  [Symbol(kOutHeaders)]: [Object: null prototype],
  [Symbol(errored)]: null,
  [Symbol(kHighWaterMark)]: 16384,
  [Symbol(kRejectNonStandardBodyWrites)]: false,
  [Symbol(kUniqueHeaders)]: null
},
data: '<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: NotFound</title><meta name="next-head-count" content="3"/></html>'
 },
 isAxiosError: true,
 toJSON: [Function: toJSON]
  }
 Hint: for non-standard server or Next.js route configurations, you may need to override the 'resolveServerUrl' or 'resolvePageUrl' available on the 'EditingRenderMiddleware' config.

Error 2:

    Editing data cache miss for key 0893e6d7-8a9d-471f-ba1f-557b7d0990c2-jrtspdrkb1 at /tmp/if-you-need-to-delete-this-open-an-issue-sync-disk-cache/editing-data
Error: Unable to get editing data for preview {"key":"0893e6d7-8a9d-471f-ba1f-557b7d0990c2-jrtspdrkb1"}
at Object.exec (/var/task/.next/server/chunks/3853.js:643:10076)
at async /var/task/.next/server/chunks/3853.js:66:309586
at async /var/task/.next/server/chunks/3853.js:66:309576
at async /var/task/.next/server/chunks/3853.js:66:309576
at async /var/task/.next/server/chunks/3853.js:66:309576
at async /var/task/.next/server/chunks/3853.js:66:309576
at async Object.create (/var/task/.next/server/chunks/3853.js:66:309498)
at async getStaticProps (/var/task/.next/server/pages/[[...path]].js:1:2912) {


page: '/'
}
Error: Cannot find module '/var/task/.next/server/pages/500.js'
Require stack:
- /var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js
- /var/task/___next_launcher.cjs
- /opt/node-bridge/chunk-N3ULQXIM.js
- /opt/node-bridge/chunk-5UAC7W5H.js
- /opt/node-bridge/vercel-tla.js
- /var/task/___vc/__launcher/__launcher.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)
    at /var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:15:28048
    at Module._load (node:internal/modules/cjs/loader:975:27)
    at exports.b (/opt/node-bridge/chunk-5UAC7W5H.js:1:1033)
    at /opt/node-bridge/bridge-server-BGIDXK2J.js:1:1443
    at Function.Re (/opt/node-bridge/bridge-server-BGIDXK2J.js:1:1809)
    at e.<computed>.L._load (/opt/node-bridge/bridge-server-BGIDXK2J.js:1:1413)
    at Module.require (node:internal/modules/cjs/loader:1225:19)
    at w.require (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:15:28264)
    at require (node:internal/modules/helpers:177:18) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js',
    '/var/task/___next_launcher.cjs',
    '/opt/node-bridge/chunk-N3ULQXIM.js',
    '/opt/node-bridge/chunk-5UAC7W5H.js',
    '/opt/node-bridge/vercel-tla.js',
    '/var/task/___vc/__launcher/__launcher.js'
  ]
}
Error: Unable to get editing data for preview {"key":"0893e6d7-8a9d-471f-ba1f-557b7d0990c2-jrtspdrkb1"}
    at Object.exec (/var/task/.next/server/chunks/3853.js:643:10076)
    at async /var/task/.next/server/chunks/3853.js:66:309586
    at async /var/task/.next/server/chunks/3853.js:66:309576
    at async /var/task/.next/server/chunks/3853.js:66:309576
    at async /var/task/.next/server/chunks/3853.js:66:309576
    at async /var/task/.next/server/chunks/3853.js:66:309576
    at async Object.create (/var/task/.next/server/chunks/3853.js:66:309498)
    at async getStaticProps (/var/task/.next/server/pages/[[...path]].js:1:2912) {
  page: '/'
}
Error: Runtime exited without providing a reason
Runtime.ExitError

1 Answer 1

3

The issue was due to us having unchecked "Automatically expose System Environment Variables":

sys env vars false

We had done this previously due to adverse effects on next-auth-js. We were unable to override the PUBLIC_URL that it retrieved as it kept pulling the Vercel Domain and we rely on Cloudflare to proxy into Vercel with a .com (whereas Vercel provides a *.vercel.app domain OOTB).

This setting affects which instance of the Editing Data Service is used. With the ServerlessEditingDataService being required for Vercel. With process.env.VERCEL hidden, we were defaulting to BasicEditingDataService thus causing us the error.

https://github.com/Sitecore/jss/blob/dev/packages/sitecore-jss-nextjs/src/editing/editing-data-service.ts

So, if we check this box it breaks next-auth-js, but if we uncheck it, it breaks Experience Editor.

Our solution was to leave the checkbox unchecked and to instead manually add the variable VERCEL with a value of "1". This satisfies the condition in Sitecore-JSS and still allows next-auth-js to work properly.

Vercel equals one

It is worth noting that Sitecore JSS relies on a few other VERCEL system variables as well.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.