TypeError: document.querySelector is not a function
- Dominant language
- JavaScript
- Stars
- 5.3k
- Forks
- 187
- PR merge metrics
- No merged PRs in 30d
Description
Has anybody else come across an error when trying to extend StyleSheet and using SSR? I cannot seem to figure out what is causing this. It is telling me that there is no document.querySelector but on my local machine everything appears to be working fine but when I push my project up to Heroku it crashes and gives me the following error message. I have been working on this for a couple hours and am totally stumped.
Here is my code for reference
```js
import { StyleSheet as SS } from 'aphrodite/no-important'
const GLOBALS = '___GLOBAL_STYLES___'
const globalExtension = {
selectorHandler: (selector, baseSelector, generatedSubtreeStyles) => (baseSelector.includes(GLOBALS) ? generatedSubtreeStyles(selector) : null)
}
const { css, StyleSheet, StyleSheetServer } = SS.extend([ globalExtension ])
export {
GLOBALS,
css,
StyleSheet,
StyleSheetServer
}
```
I would really like to avoid the pages flickering on each load so I am attempting to load the global styles with the rest of the styles on first load. The reasoning for doing it through aphrodite is the built in compression, vendor prefixing and just eliminating having lots of additional style tags on the page if I can avoid it.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the shown StyleSheet.extend setup with server-side rendering on Heroku, then trace where document.querySelector is called in Aphrodite's SSR path. Use StyleSheetServer and the provided globalExtension as the entry points; the work is done when SSR completes without the TypeError and global styles load on the first render without flicker.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100