{"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":20481,"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":"69c6c5807fa48f2af9fefb80","content":{"languages":["html"],"difficulty":1},"tags":["javascript","ui","ux","devtools tech","interview question","atlassian","frontend coding","ui challenges"],"slug":"real-time-comment-feed---qid---gxnubQDhcOkUH6VxaJra","title":"Real-Time Comment Feed","questionId":"gxnubQDhcOkUH6VxaJra"},{"_id":"636e0e4abc012474df4d3949","content":{"languages":["javascript"],"difficulty":1},"tags":["javascript","frontend","coding","devtools tech","interview questions","interview preparation","mcq","programming paradigm","tooling","mdn","js paradigm","programming questions","spread operator","rest syntax","es6"],"slug":"what-would-be-the-output-of-the-following-code-based-on-spread-operator---qid---Cf4DCZb85KueZecM12fi","title":"What would be the output of the following code? (Based on Spread Operator)","questionId":"Cf4DCZb85KueZecM12fi"},{"_id":"6373bc7b9cbdb764d46a0ec0","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","custom unshift","array push"],"slug":"how-to-implement-array-prototype-push-javascript-interview-question-or-problem-solving-or-javascript-polyfills---qid---W3kxb3R36UKmCjPhoVAd","title":"How to implement Array.prototype.push? JavaScript Interview Question | Problem Solving | JavaScript Polyfills","questionId":"W3kxb3R36UKmCjPhoVAd"},{"_id":"68375aa97121cd6d5785f23a","content":{"languages":["react"],"difficulty":2},"tags":["useobjectstate","custom hook","react","ui","ux","devtools tech","coding","frontend"],"slug":"useobjectstate---qid---zlSsuio85wONJyZyUGQJ","title":"useObjectState","questionId":"zlSsuio85wONJyZyUGQJ"},{"_id":"693acba17a8f6445002fb9bb","content":{"languages":["react","html"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","coding","frontend","coding challenge"],"slug":"dynamic-grid-challenge---qid---qBEJAlpjKP1ZSg3pcuYX","title":"Dynamic Grid Challenge","questionId":"qBEJAlpjKP1ZSg3pcuYX"}],"resources":[{"_id":"5f1ffa3acbec5f7ffc0c2fb7","content":{"difficulty":3,"domain":2,"type":1},"tags":["javascript","frontend","advanced react","build react","react internals","tutorials","reactjs"],"slug":"build-your-own-react---rid---XdoSkFr67KA5TMwu1lc0","title":"Build your own React","resourceId":"XdoSkFr67KA5TMwu1lc0"},{"_id":"5f742d996d3cda64e470c3f9","content":{"difficulty":4,"domain":2,"type":2},"tags":["javascript","new operator","frontend","js fundamentals"],"slug":"understanding-the-new-operator-in-javascript-or-part-1-or-devtools-tech---rid---kTcPgR4xKUiLIupiLcE8","title":"Understanding the new operator in JavaScript | Part 1 | Devtools Tech","resourceId":"kTcPgR4xKUiLIupiLcE8"},{"_id":"601c195f0858864c592fb52e","content":{"difficulty":2,"domain":2,"type":2},"tags":["Javascript","Interview Questions","Web Development","Frontend"],"slug":"chained-calculator-or-frontend-interview-series-or-puneet-ahuja-or-devtools-tech---rid---ohM3pdtnJDCKDgW5nZOy","title":"Chained Calculator | Frontend Interview Series | Puneet Ahuja | Devtools Tech","resourceId":"ohM3pdtnJDCKDgW5nZOy"},{"_id":"62f3547677f9961d5b7c4bdf","content":{"difficulty":4,"domain":2,"type":2,"isInternal":false},"tags":["javascript","frontend coding challenges","reactjs","vanilla js","trello board","clone trello board","devtools tech","frontend masters","javascript interview question"],"slug":"clone-trello-board,-implement-dom-tree,-access-nested-properties-or-frontend-coding-challenges---rid---tNbr11YAsDyhSDHgQNiv","title":"Clone Trello Board, Implement DOM Tree, Access Nested Properties | Frontend Coding Challenges","resourceId":"tNbr11YAsDyhSDHgQNiv"},{"_id":"6924ac08bf1a48f85e0ddb2d","content":{"difficulty":4,"domain":1,"type":2,"isInternal":false,"languages":[]},"tags":["javascript","promises","frontend","ui","ux","devtools tech","coding","async await","async programming","coding"],"slug":"javascript-promises-complete-course---basics-to-advanced---rid---2lf744w157vmmYfDP14Q","title":"JavaScript Promises Complete Course – Basics to Advanced","resourceId":"2lf744w157vmmYfDP14Q"}]}}