TypeError: document.querySelector is not a function

[couturecraigj]

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

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.

[xymostech]

Hi @couturecraigj! Sorry you're running into this issue. Are you experiencing this error on the server-side rendering server, or in the client?

What does your code look like for doing the server-side rendering? Are you wrapping your render call in StyleSheetServer.renderStatic()? (See the readme for how to do this)

[couturecraigj]

I am as that was the setup that came with the boilerplate I was using. I just recently updated everything to 1.1 it appears to be located around extending the StyleSheet using the above configuration as is in the configuration in the system. When I make this so it only renders on the client I encounter no issues but if I want it to precompile I am getting the document.querySelector issue.

On Mar 6, 2017, at 6:03 PM, Emily Eisenberg [email protected] wrote:

Hi @couturecraigj https://github.com/couturecraigj! Sorry you're running into this issue. Are you experiencing this error on the server-side rendering server, or in the client?

What does your code look like for doing the server-side rendering? Are you wrapping your render call in StyleSheetServer.renderStatic()? (See the readme https://github.com/khan/aphrodite#server-side-rendering for how to do this)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Khan/aphrodite/issues/209#issuecomment-284563420, or mute the thread https://github.com/notifications/unsubscribe-auth/AF9vGOllUFYeLcQHpjoXkQ4dTPepxC9wks5rjJClgaJpZM4MUr-c.

[ecozoic]

I'm going to piggyback off of this issue instead of creating another one since they may be related in a weird way.

I'm running unit tests w/ Jest using jsdom environment. But when using Aphrodite I'm getting "Type Error: cannot read property querySelectorAll of undefined." whenever performing shallow rendering with enzyme.

This doesn't make much sense to me because jsdom mocks document. In my actual unit tests, I can access document and querySelectorAll no problem. But for whatever reason, the aphrodite code cannot.

Here's a simple repo where you can reproduce the issue: https://github.com/ecozoic/aphrodite-test

There is a workaround using StyleSheetTestUtils.suppressStyleInjection mentioned here, but something feels off about document being undefined even in a jsdom environment.

I'd be happy to help if anyone can point me in the right direction.

Error stack trace:

styleTag = document.querySelector("style[data-aphrodite]");
                           ^
TypeError: Cannot read property 'querySelector' of undefined
    at injectStyleTag (/aphrodite-test/node_modules/aphrodite/lib/inject.js:37:28)
    at flushToStyleTag (/aphrodite-test/node_modules/aphrodite/lib/inject.js:201:9)
    at RawTask.Object.<anonymous>.RawTask.call (/aphrodite-test/node_modules/asap/asap.js:40:19)
    at flush (/aphrodite-test/node_modules/asap/raw.js:50:29)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

EDIT - Starting w/ some old fashioned console.log() statements and document.querySelectorAll is defined when aphrodite is required (node_modules/aphrodite/lib/index.js) but somewhere along the way it's getting lost.

[xymostech]

@ecozoic See #62. Basically, Aphrodite buffers its style insertion and performs it async, which means that even if document is defined during the test, it might not be defined after the test ends, which is when Aphrodite goes looking for it. If you're actually testing to make sure that styles get injected, you can do what we do here: https://github.com/Khan/aphrodite/blob/master/tests/index_test.js#L72 and delay a little bit before checking for the styles. If you don't care about checking for the styles, StyleSheetTestUtils.suppressStyleInjection is the way to go.

[xymostech]

@couturecraigj can you show me the code where you're doing your rendering, or tell me which boilerplate you are using? It sounds like you're not server-side rendering correctly.

[milesj]

@ecozoic I'm having the exact same problem. Did you ever figure it out?

StyleSheetTestUtils.suppressStyleInjection doesn't actually fix the problem for me.

[couturecraigj]

@xymostech I gave up on using it... moved everything to post-css... I tried everything, re-wrote it three times and got tired of trying to make it work. For some reason it was not working... not sure if it was my stack but I got a lot of stack to dig through so had to move to something a little less fragile for my globals.

[saltycrane]

TypeError: Cannot read property 'querySelector' of undefined

For the above error, the following worked for me using [email protected] and jest@20:

const { StyleSheetTestUtils } = require('aphrodite');
const {
  StyleSheetTestUtils: StyleSheetTestUtilsNoImportant,
} = require('aphrodite/no-important');

StyleSheetTestUtils.suppressStyleInjection();
StyleSheetTestUtilsNoImportant.suppressStyleInjection();

From https://github.com/dmiller9911/jest-aphrodite-react/blob/8c1344eb9b9e271bd171a95f53c005d934cb696d/jestSetup.js#L3-L9 https://github.com/dmiller9911/jest-aphrodite-react/blob/8c1344eb9b9e271bd171a95f53c005d934cb696d/jest.config.json#L2

[chriskuech]

This still seems to be an issue.