{"resource":{"author":{"id":"h2so9H8jPMmgUKGghoNl","name":"Yomesh Gupta","username":"yomeshgupta"},"content":{"link":null,"difficulty":4,"domain":2,"type":1,"isInternal":true,"body":"[Remix Run](https://remix.run/) is a Server Side Rendering a.k.a. SSR first full-stack web framework. It focuses on the user interface and emphasizes web fundamentals to build fast, slick, and resilient user experiences.\r\n\r\nDue to its SSR first approach, it runs the code both on server and client. That is why, many times, we might face an error like `ReferenceError: window is not defined` when we try to access the client-side only variables on the server. Let us consider an example --\r\n\r\n```js\r\nconst Screen = () => {\r\n  const [innerWidth, setInnerWidth] = useState(window.innerWidth);\r\n\r\n  ...\r\n};\r\n\r\nexport default Screen;\r\n```\r\n\r\nIn the above code snippet, we have a component named `Screen` that uses `window.innerWidth` to set the initial value. Now, during SSR, the code executes on the server but the `window` object simply doesn't exist there. Hence, this will break our app. To fix this we can move the access to the `window` variable inside `useEffect`. As `useEffect` code is only executed on the client.\r\n\r\n```js\r\nimport { useEffect } from 'react';\r\n\r\nconst Screen = () => {\r\n  const [innerWidth, setInnerWidth] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setInnerWidth(window.innerWidth);\r\n  }, []);\r\n\r\n  ...\r\n};\r\n\r\n...\r\n```\r\n\r\n## Handling Third-Party Packages\r\n\r\nLet us say we are using a package that internally consumes client/browser only code/variables. We can't modify the package code in any way. So, how to handle such cases?\r\n\r\nIn our [programming questions page](https://devtools.tech/questions/s/how-to-create-a-flat-version-of-a-deeply-nested-array-programming-interview-question---qid---l5Qx4LJ7glelCkIxQjXB), we are using [Ace Editor](https://www.npmjs.com/package/react-ace). On initialisation, it uses the `window` variable. So, it used to break our app during SSR. In Remix, if we want to consume certain code in the browser only then we can add `.client` to the file name and Remix will not render that file during SSR. Let us see it in action.\r\n\r\n```js\r\n// file: CodeEditor.client.js\r\n\r\nimport AceEditor from \"react-ace\";\r\n\r\nimport \"ace-builds/src-noconflict/mode-javascript\";\r\nimport \"ace-builds/src-noconflict/theme-monokai\";\r\nimport \"ace-builds/src-noconflict/ext-language_tools\";\r\nimport \"ace-builds/src-noconflict/ext-searchbox\";\r\nimport \"ace-builds/src-noconflict/keybinding-vscode\";\r\n\r\nconst CodeEditor = (props) => {\r\n  return <AceEditor {...props} />;\r\n};\r\n\r\nexport default CodeEditor;\r\n```\r\n\r\nIn the above code snippet, we created a file `CodeEditor.client.js`. Due to the `.client` extension, Remix will not render this file on the server.\r\n\r\n```js\r\n// file: Question.js\r\n\r\nimport CodeEditor from \"./CodeEditor.client\";\r\n\r\nconst Question = () => {\r\n  return <CodeEditor />;\r\n};\r\n\r\nexport default Question;\r\n```\r\n\r\nWe still need to import the `CodeEditor` in our `Question` Page. However, creating an instance of it via `<CodeEditor />` would break our app.\r\n\r\n### Adding a Document Guard\r\n\r\nWe can fix the above issue by adding a check on the `document` variable and rendering a fallback UI.\r\n\r\n```js\r\n// file: Question.js\r\n\r\nimport CodeEditor from \"./CodeEditor.client\";\r\n\r\nconst Fallback = () => {\r\n  return <div>Loading IDE...</div>;\r\n};\r\n\r\nconst Question = () => {\r\n  return typeof document !== \"undefined\" ? <CodeEditor /> : <Fallback />;\r\n};\r\n\r\n...\r\n```\r\n\r\nNow, initially, we would be showing the user a fallback screen stating `Loading IDE...`, as soon as the scripts are loaded, Fallback would be replaced with the actual code editor.\r\n\r\n### Other Approaches\r\n\r\nWe can also use third party packages like [Remix Utils](https://github.com/sergiodxa/remix-utils) to handle the browser only code. Remix Utils provides a component named `ClientOnly` that lets us render the children element only on the client-side. Let us modify our code to see how we can use this package.\r\n\r\n```\r\nnpm i remix-utils\r\n```\r\n\r\n```js\r\n// file: Question.js\r\n\r\nimport CodeEditor from \"./CodeEditor.client\";\r\n\r\nconst Fallback = () => {\r\n  return <div>Loading IDE...</div>;\r\n};\r\n\r\nconst Question = () => {\r\n  return (\r\n    <ClientOnly fallback={<Fallback />}>\r\n      <CodeEditor />\r\n    </ClientOnly>\r\n  );\r\n};\r\n\r\n...\r\n```\r\n\r\nThe rendering flow would look like this:\r\n\r\n- Server-Side Rendering: Always render the fallback.\r\n- First time Client Side Rendering: Always render the fallback.\r\n- Client-Side Rendering Update: Replace with the actual component.\r\n- Client-Side Rendering Future Updates: Always use the actual component.\r\n\r\nSo, this is how we can resolve the `ReferenceError: window is not defined` error in Remix powered Web-App.\r\n\r\nI hope this blog post helped you in some way. Please do share it and show our content much-needed love! :D\r\n\r\nIf you feel something is missing/wrong/improvement is possible then feel free to reach out -- [Devtools Tech](https://twitter.com/devtoolstech) and [Yomesh Gupta](https://twitter.com/yomeshgupta)\r\n","languages":[],"editorConfig":{}},"stats":{"views":18364,"used":0,"likes":0},"description":"","published":true,"isActive":true,"tags":[""],"slug":"how-to-fix-errors-like-referenceerror-window-is-not-defined-in-remix-powered-web-app-or-javascript-frameworks---rid---G0OTehUXo6QQCrfykSF3","isPremium":false,"categories":[],"requires":[],"_id":"620a50051641361c7c65bd61","title":"How to fix errors like ReferenceError Window is Not Defined in Remix Powered Web App | JavaScript Frameworks","resourceId":"G0OTehUXo6QQCrfykSF3","createdAt":1644843013003,"modifiedAt":1644843625963},"currentUser":null,"isOwner":false,"recommendations":{"questions":[{"_id":"61fe2a6ce12bce537863cafc","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["javascript","promises","async programming","advanced javascript","interview question","frontend","coding"],"slug":"how-to-implement-promise-all-or-promise-polyfills-or-advanced-javascript-interview-question---qid---PQPfusX4Vr7lhpiFrEFs","title":"How to implement Promise.all? | Promise Polyfills | Advanced JavaScript Interview Question","questionId":"PQPfusX4Vr7lhpiFrEFs"},{"_id":"658477003e4c0459a450305f","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["javascript","frontend","razorpay","interview question","pipe","high order functions","problem solving","closures","ui","ux","devtools tech","tutorials","array","objects","functions"],"slug":"how-to-implement-pipe-utility-or-razorpay-interview-question-or-javascript---qid---Dm2i9tr8y3ILsg4Bzn0u","title":"How to implement pipe utility? | Razorpay Interview Question | JavaScript","questionId":"Dm2i9tr8y3ILsg4Bzn0u"},{"_id":"68270e23c721dd772d9362d8","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["breadcrumbs","coding","interview","zepto","frontend interview question","ui","ux","programming","algorithms","dsa","object traversal","dom traversal"],"slug":"breadcrumb-chain-problem---qid---KO1sGon4cWLhj8BEuuKk","title":"Breadcrumb Chain Problem","questionId":"KO1sGon4cWLhj8BEuuKk"},{"_id":"5fef4e836d3cda64e470c42d","content":{"difficulty":2,"languages":"javascript"},"tags":["javascript","frontend","scopes","prototypes","frontend fundamentals"],"slug":"what-would-be-the-output-of-the-following-code-snippet-prototypes-and-scopes---qid---nasA1sfUZJbMGNMmGyKL","title":"What would be the output of the following code snippet? [Prototypes & Scopes]","questionId":"nasA1sfUZJbMGNMmGyKL"},{"_id":"68ebdd75e901f595bb2348ad","content":{"languages":["react","html"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","programming question","subtasks","task view","atlassian frontend interview question"],"slug":"issue-tracker-ui---qid---lzYRUPICJ0dk6cCAWGe5","title":"Issue Tracker UI","questionId":"lzYRUPICJ0dk6cCAWGe5"}],"resources":[{"_id":"698b2bde895fc3bf01415e40","content":{"difficulty":4,"domain":2,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","coding","frontend","devtools tech","frontend interview experience"],"slug":"zomato-frontend-interview-experience-or-sde-2---rid---7hUoqLgUfYf13XaOXRlq","title":"Zomato Frontend Interview Experience | SDE 2","resourceId":"7hUoqLgUfYf13XaOXRlq"},{"_id":"6339359342e7761bfac16e89","content":{"difficulty":1,"domain":2,"type":2,"isInternal":false},"tags":["javascript","requestly","frontend","devtools tech","coding","mock server","mock api","headers","redirect","api"],"slug":"how-to-supercharge-your-development-workflow-or-reviewing-requestlyio-or-improving-frontend-dx---rid---vgQNMcZkgncuDninBiYf","title":"How to Supercharge Your Development Workflow!? | Reviewing Requestly.io | Improving Frontend DX","resourceId":"vgQNMcZkgncuDninBiYf"},{"_id":"652d62fad5ab2876a4ca20ca","content":{"difficulty":4,"domain":2,"type":1,"isInternal":false,"languages":[]},"tags":["frontend","coding","devtools tech","razorpay","interview experience","programming","code","ui","ux"],"slug":"my-frontend-interview-experience-at-razorpay---rid---omqBNlB56roAbPcr5oSM","title":"My FrontEnd Interview Experience At Razorpay","resourceId":"omqBNlB56roAbPcr5oSM"},{"_id":"6990b509d080a1c8aefc6156","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","ui","ux","jobs","job search","frontend","coding","devtools tech"],"slug":"how-to-improve-job-search-using-google---rid---JNrLxyNeJ4pMMHD6KnOh","title":"How to improve job search using Google","resourceId":"JNrLxyNeJ4pMMHD6KnOh"},{"_id":"62056636e12bce537863f36a","content":{"difficulty":1,"domain":1,"type":1,"isInternal":true},"tags":["javascript","remix run","social login","login with google","session","encryption","js fundamentals","remix server"],"slug":"add-social-authentication-to-remix-run-project-or-remix-server---rid---GEN4IbgWorJNeQL7Gkm8","title":"Add Social Authentication to Remix Run Project | Remix Server","resourceId":"GEN4IbgWorJNeQL7Gkm8"}]}}