1

We encountered the following exception when attempting to browse the page in Sitecore JSS 10.3 through experience editor. All the files have been deployed under wwwroot\sc103.sc\dist\. We have tried multiple workarounds but have been unable to find a solution. Could someone please assist us in resolving this issue?

Error Rendering Sitecore.JavaScriptServices.ViewEngine.Presentation.JsLayoutRenderer: document is not defined ReferenceError: document is not defined at r.key (C:\inetpub\wwwroot\sc103.sc\dist\wera\server.bundle.js:159493:17) at C:\inetpub\wwwroot\sc103.sc\dist\wera\server.bundle.js:159543:6 at C:\inetpub\wwwroot\sc103.sc\dist\wera\server.bundle.js:159588:4 at C:\inetpub\wwwroot\sc103.sc\dist\wera\server.bundle.js:165582:3 at Object. (C:\inetpub\wwwroot\sc103.sc\dist\wera\server.bundle.js:165587:12) at Module._compile (node:internal/modules/cjs/loader:1376:14) at Module._extensions..js (node:internal/modules/cjs/loader:1435:10) at Module.load (node:internal/modules/cjs/loader:1207:32) at Module._load (node:internal/modules/cjs/loader:1023:12) at Module.require (node:internal/modules/cjs/loader:1235:19)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.Http.HttpNodeInstance.InvokeExport[T](NodeInvocationInfo invocationInfo)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.OutOfProcessNodeInstance.InvokeExport[T](String moduleName, String exportNameOrNull, Object[] args)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.InvokeExportWithPossibleRetry[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.InvokeExport[T](String moduleName, String exportedFunctionName, Object[] args)
   at Sitecore.JavaScriptServices.ViewEngine.Node.NodeRenderEngine.Invoke[T](String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.PerformRender(TextWriter writer, IRenderEngine renderEngine, String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.Render(TextWriter writer)
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.ExecuteRenderer.Render(Renderer renderer, TextWriter writer, RenderRenderingArgs args)

Application Versions:

Sitecore version: 10.3

Framework: React JS

Node version: v20.11.0

Package.json:

{
  "name": "wera",
  "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
  "version": "21.2.1",
  "private": true,
  "config": {
    "appName": "wera",
    "rootPlaceholders": [
      "jss-header",
      "jss-main",
      "jss-footer"
    ],
    "sitecoreDistPath": "/dist/wera",
    "sitecoreConfigPath": "/App_Config/Include/zzz",
    "graphQLEndpointPath": "/sitecore/api/graph/edge",
    "language": "ar",
    "tunnelUrl": "http://jss.ngrok.io",
    "templates": [
      "react"
    ]
  },
  "engines": {
    "node": ">=12",
    "npm": ">=6"
  },
  "author": {
    "name": "Sitecore Corporation",
    "url": "https://jss.sitecore.com"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sitecore/jss.git"
  },
  "bugs": {
    "url": "https://github.com/sitecore/jss/issues"
  },
  "license": "Apache-2.0",
  "dependencies": {
    "@apollo/client": "^3.7.1",
    "@nivo/bar": "^0.84.0",
    "@nivo/line": "^0.84.0",
    "@sitecore-jss/sitecore-jss-react": "~21.2.2",
    "@sitecore-jss/sitecore-jss-react-forms": "^21.4.0",
    "axios": "^1.5.1",
    "cross-fetch": "^3.1.5",
    "deep-equal": "^2.1.0",
    "graphql": "~16.6.0",
    "graphql-tag": "~2.12.6",
    "html-react-parser": "^5.0.6",
    "html2canvas": "^1.4.1",
    "i18next": "^22.0.6",
    "jspdf": "^2.5.1",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-accessible-accordion": "^5.0.0",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-helmet": "~6.1.0",
    "react-i18next": "~12.0.0",
    "react-modal": "^3.16.1",
    "react-organizational-chart": "^2.2.1",
    "react-query": "^3.39.3",
    "react-rating-stars-component": "^2.2.0",
    "react-router-dom": "~6.4.4",
    "react-scripts": "~5.0.1",
    "react-slick": "^0.29.0",
    "serialize-javascript": "^6.0.0",
    "slick-carousel": "^1.8.1",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/register": "~7.18.9",
    "@sitecore-jss/sitecore-jss-cli": "~21.2.2",
    "@sitecore-jss/sitecore-jss-dev-tools": "~21.2.2",
    "@sitecore-jss/sitecore-jss-rendering-host": "~21.2.2",
    "babel-loader": "~9.1.0",
    "babel-preset-react-app": "~10.0.1",
    "chalk": "~4.1.2",
    "constant-case": "^3.0.4",
    "cross-env": "~7.0.3",
    "cross-spawn": "^7.0.3",
    "del-cli": "^5.0.0",
    "dotenv": "^16.0.3",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-yaml": "^0.5.0",
    "express": "^4.18.2",
    "fs-extra": "^11.1.0",
    "graphql.macro": "~1.4.2",
    "html-loader": "~4.2.0",
    "http-proxy-middleware": "~2.0.6",
    "move-cli": "^2.0.0",
    "ncp": "^2.0.0",
    "ngrok": "^4.3.3",
    "npm-run-all": "~4.1.5",
    "null-loader": "~4.0.1",
    "prettier": "^2.8.0",
    "speed-measure-webpack-plugin": "^1.5.0",
    "stats-webpack-plugin": "^0.7.0",
    "tailwindcss": "^3.3.3",
    "webpack": "~5.76.2",
    "webpack-cli": "~5.0.0"
  },
  "scripts": {
    "jss": "jss",
    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:react start:proxy start:watch-components\"",
    "start:connected": "npm-run-all --serial bootstrap start:react start:watch-components",
    "start:rendering-host": "cross-env-shell NODE_ENV=development JSS_RENDER_ENGINE=http \"node scripts/http-renderer.js\"",
    "build": "npm-run-all --serial bootstrap build:client build:server",
    "build:rendering-host": "npm-run-all --serial bootstrap build:client:rendering-host build:server afterbuild:rendering-host",
    "afterbuild:rendering-host": "del-cli build-rendering-host && move-cli build build-rendering-host",
    "scaffold": "node scripts/scaffold-component.js",
    "start:react": "react-scripts start",
    "start:proxy": "node scripts/disconnected-mode-proxy.js",
    "start:watch-components": "node scripts/generate-component-builder/index.js --watch",
    "build:client": "cross-env-shell PUBLIC_URL=$npm_package_config_sitecoreDistPath \"react-scripts build\"",
    "build:client:rendering-host": "cross-env-shell PUBLIC_URL=$npm_package_config_tunnelUrl \"react-scripts build\"",
    "build:server": "cross-env-shell NODE_ENV=production \"webpack --config server/server.webpack.config.js\"",
    "bootstrap": "node scripts/bootstrap.js",
    "graphql:update": "node -r @babel/register ./scripts/update-graphql-fragment-data.js",
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint ./src/**/*.js ./sitecore/definitions/**/*.js ./scripts/**/*.js ./server/**/*.js ./data/**/*.yml",
    "eject": "react-scripts eject",
    "eject:script": "ncp ./scripts ./scripts-copy && node ./scripts-copy/eject.js && ncp ./scripts-copy ./scripts && del-cli ./scripts-copy",
    "install-pre-push-hook": "node ./scripts/install-pre-push-hook.js"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

We have attempted to implement solutions provided in the various articles but no luck

4

2 Answers 2

0

There is some code that is not meant to be rendered on the client side

Kindly check your code for the references of the document and add the below condition inside your code

if( typeof document!== 'undefined' ){

your code goes here

}
0

It looks like there may be code running on the server-side that is only meant to run on the client-side. First check your code for references to document, window, or .key, and ensure that the proper checks / mechanisms (hooks, lifecycle methods such as useEffect) are in place for when the code runs server-side. Such calls may also be triggered by dependencies or sub-dependencies which may not be "SSR-friendly". Try and isolate the issue by stripping away parts of your app.

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.