{"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":19308,"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":"697a002c132ce4e954c67f28","content":{"languages":["react"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","frontend interview question","hackerrank frontend interview question"],"slug":"spreadsheet-grid---qid---nBrwdTgAJo99lGIYefmC","title":"Spreadsheet Grid","questionId":"nBrwdTgAJo99lGIYefmC"},{"_id":"635121809efd8c366a2e7f23","content":{"languages":["javascript","typescript"],"difficulty":1},"tags":["","javascript","arrays","javascript polyfills","interview question","frontend","coding","devtools tech","programming","codedamn","frontend masters","egghead","razorpay","hotstar","tata1mg","swiggy","zomato","array","array findindex"],"slug":"how-to-implement-arrayprototypefindindex-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---DWM4ApioOxMMCYuHoe9I","title":"How to implement Array.prototype.findIndex? JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"DWM4ApioOxMMCYuHoe9I"},{"_id":"6908ce763177c39e8559f7c9","content":{"languages":["react","html"],"difficulty":1},"tags":["javascript","ui","ux","infinite scroll","dom","virtual dom","disney hotstar","programming question"],"slug":"infinite-scroll-pagination---qid---FZH2HcNLF3zUMqxmlNMW","title":"Infinite Scroll Pagination","questionId":"FZH2HcNLF3zUMqxmlNMW"},{"_id":"68468e5eeba49c30679280e3","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":[],"slug":"implement-a-timeout-based-api-wrapper-with-optional-retry---qid---TqH1fl7pEful8giHWk52","title":"Implement a Timeout-Based API Wrapper with Optional Retry","questionId":"TqH1fl7pEful8giHWk52"},{"_id":"626657561195627fe9f1b3cb","content":{"languages":["javascript","typescript"],"difficulty":2},"tags":["","javascript","frontend","node.js","array","javascript engines","frontend fundamentals","advanced frontend","interviews","array indexof"," polyfills","devtools tech","frontend masters","egghead.io.codedamn","ui interviews"],"slug":"how-to-implement-array-indexof-from-scratch-or-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---uiKZDYRDupbHmsdteY4i","title":"How to implement Array indexOf from scratch? | JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"uiKZDYRDupbHmsdteY4i"}],"resources":[{"_id":"6731bf5cd34d7f4b8cccbdec","content":{"difficulty":4,"domain":1,"type":1,"isInternal":true,"languages":[]},"tags":["javascript","frontend","coding","ui","ux","developer tools","youtube videos"],"slug":"how-to-become-a-better-software-engineer---rid---4lmB97aZrn9z5q00FKZz","title":"How to become a better Software Engineer?","resourceId":"4lmB97aZrn9z5q00FKZz"},{"_id":"5f266204cbec5f7ffc0c2fc2","content":{"difficulty":1,"domain":2,"type":1},"tags":["javascript","es6","js fundamentals","arrow functions","tania rascia","devtools"],"slug":"understanding-arrow-functions-in-javascript---rid---RZqVVZQ1dO8GwrecJbft","title":"Understanding Arrow Functions in JavaScript","resourceId":"RZqVVZQ1dO8GwrecJbft"},{"_id":"655600ac3e4c0459a44b430d","content":{"difficulty":4,"domain":2,"type":1,"isInternal":false,"languages":["javascript"]},"tags":["frontend","coding","ui","ux","razorpay","interview experience","tooling","devtools tech","hasnode","blog","tutorial"],"slug":"razorpay-frontend-engineer-interview-experience---rid---1JDZUAHqg0r2uYXxVPZW","title":"Razorpay Frontend Engineer interview experience","resourceId":"1JDZUAHqg0r2uYXxVPZW"},{"_id":"625939ff1195627fe9f0bb9c","content":{"difficulty":4,"domain":17,"type":3,"isInternal":false},"tags":["life","podcast","frontend","backend.software development","tooling","devtools tech","ios","fueled","ronnie and barty","grappus","fullstack"],"slug":"beyond-code-or-episode-1-or-video-podcast---rid---wituSBDrHHWE5yB7mq7R","title":"Beyond Code | Episode 1 | Video Podcast","resourceId":"wituSBDrHHWE5yB7mq7R"},{"_id":"69a7c7b992f33c7d8aa04c41","content":{"difficulty":1,"domain":1,"type":2,"isInternal":false,"languages":[]},"tags":["javascript","ui","ux","devtools tech","coding","frontend","polyfill"],"slug":"implementing-javascript-promise-polyfill---rid---9ExnAPiGr8eioZLa9IeV","title":"Implementing JavaScript Promise Polyfill","resourceId":"9ExnAPiGr8eioZLa9IeV"}]}}