{"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":21953,"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":"61f8ef79e12bce537863b4cf","content":{"languages":["javascript","typescript"],"difficulty":4},"tags":["javascript","walmart","frontend interview question","devtools","ui","advanced javascript"],"slug":"implement-throttling-in-javascript-or-walmart-frontend-interview-question---qid---mLrwAyug9CgrVGbs6OYF","title":"Implement Throttling in JavaScript | Walmart Frontend Interview Question","questionId":"mLrwAyug9CgrVGbs6OYF"},{"_id":"643c21086577005718b99cde","content":{"languages":["react"],"difficulty":4},"tags":["frontend","coding","devtools tech","pair programming","debugging round","questions","code bugs","debugging interview questions","codemasters","egghead","frontend masters"],"slug":"debug-and-fix-the-feedback-modal-component-in-react-js-or-frontend-coding-challenge-or-debugging-round-or-javascript---qid---jCqxBMNpGb94s8DXYat5","title":"Debug and Fix the Feedback Modal Component in React.js | Frontend Coding Challenge | Debugging Round | JavaScript","questionId":"jCqxBMNpGb94s8DXYat5"},{"_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":"6a6658afda1016b2d8055e44","content":{"languages":["react"],"difficulty":2},"tags":["javascript","ui","ux","devtools tech","coding","frontend challenge","coding","interview question"],"slug":"selectable-grid-cells---qid---Y2el5BHY0tMLNgqFW0n7","title":"Selectable Grid Cells","questionId":"Y2el5BHY0tMLNgqFW0n7"},{"_id":"66753431407950304707f1ed","content":{"languages":["javascript","typescript"],"difficulty":4},"tags":["javascript","atlassian","frontend","ui","ux","devtools tech","google","coding","programming","tutorials","blog"],"slug":"how-to-implement-feature-flag-functionality-atlassian-frontend-interview-question---qid---af1JERRj92CZPrEyLl5z","title":"How to implement feature flag functionality? Atlassian Frontend Interview Question","questionId":"af1JERRj92CZPrEyLl5z"}],"resources":[{"_id":"5f1ff867cbec5f7ffc0c2fb6","content":{"difficulty":2,"domain":2,"type":1},"tags":["javascript","frontend","reactjs","profiling","performance","chrome","devtools","advanced frontend"],"slug":"profiling-react-performance-with-react-16-and-chrome-devtools---rid---Oj6vkw9ga5NIqw4266kr","title":"Profiling React performance with React 16 and Chrome Devtools.","resourceId":"Oj6vkw9ga5NIqw4266kr"},{"_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":"631050a877f9961d5b7ce988","content":{"difficulty":2,"domain":1,"type":2,"isInternal":false},"tags":["javascript","frontend","react","redux","devtools","tooling","state management"],"slug":"create-your-own-redux-or-part-2-or-createstore-api-or-advanced-frontend---rid---H9EEn90tE3Jag6zCfNkM","title":"Create Your Own Redux | Part 2 | CreateStore API | Advanced Frontend","resourceId":"H9EEn90tE3Jag6zCfNkM"},{"_id":"63f077e9412456738aaee88c","content":{"difficulty":1,"domain":2,"type":1,"isInternal":true,"languages":["react"]},"tags":["javascript","frontend","code","programming","ui","ux","interactive examples","codedamn","nth-child selectors","pseudo selectors","css selectors","sass","scss","less","styling","html","css fundamentals","frontend fundamentals","examples","codesandbox"],"slug":"understanding-nth-child-selectors-in-css---rid---ZD7WRQQ8iSNv8SCSZdTG","title":"Understanding Nth-Child Selectors in CSS","resourceId":"ZD7WRQQ8iSNv8SCSZdTG"},{"_id":"5f1dd793cbec5f7ffc0c2fad","content":{"difficulty":2,"domain":1,"type":1,"isInternal":true},"tags":["node.js","javascript","frontend","frontend fundamentals","js fundamentals","interview questions","backend","backend fundamentals","webpack","inside webpack","advanced webpack"],"slug":"understanding-webpacks-require---rid---7VvMusDzMPVh17YyHdyL","title":"Understanding Webpack's Require","resourceId":"7VvMusDzMPVh17YyHdyL"}]}}