Khan / Khan/aphrodite

TypeError: document.querySelector is not a function

Open
#209 9 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.