Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: document.querySelector is not a function on production build

See original GitHub issue

Bug report

I can run a dev server, but whenever doing a production build I’ll get the error:

TypeError: document.querySelector is not a function

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

➜ client git:(380-schemas) npm run build

> @considr-it/inq-client@2.0.0 build /Users/dc/dev/inq/inQ/client
> next build

info  - Loaded env from .env.production.local
info  - Loaded env from .env.local
info  - Loaded env from .env
Creating an optimized production build

Compiled successfully.


> Build error occurred
TypeError: document.querySelector is not a function
    at new StyleSheet (/Users/dc/dev/inq/inQ/client/node_modules/styled-jsx/dist/lib/stylesheet.js:42:44)
    at new StyleSheetRegistry (/Users/dc/dev/inq/inQ/client/node_modules/styled-jsx/dist/stylesheet-registry.js:28:33)
    at Object.<anonymous> (/Users/dc/dev/inq/inQ/client/node_modules/styled-jsx/dist/style.js:15:26)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/dc/dev/inq/inQ/client/node_modules/styled-jsx/style.js:1:18) {
  type: 'TypeError'
}
Automatically optimizing pages .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @considr-it/inq-client@2.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @considr-it/inq-client@2.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dc/.npm/_logs/2020-08-04T21_56_46_991Z-debug.log
➜  client git:(380-schemas) node -v
v12.18.0

a dev build works fine

➜  client git:(380-schemas) ✗ npm run dev

> @considr-it/inq-client@2.0.0 dev /Users/dc/dev/inq/inQ/client
> next dev -p 4001

ready - started server on http://localhost:4001
info  - Loaded env from /Users/dc/dev/inq/inQ/client/.env.local
info  - Loaded env from /Users/dc/dev/inq/inQ/client/.env
event - compiled successfully

Expected behavior

can build

Screenshots

System information

building on mac, latest darwin

➜ client git:(380-schemas) ✗ npx next -v Next.js v9.5.1 ➜ client git:(380-schemas) ✗ node -v v12.18.0

Additional context

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:11 (4 by maintainers)

Top GitHub Comments

3reactions

labedalcommented, Dec 18, 2020

I had the problem with another project. My way to solve this was:

_app.tsx -> add following after your imports:

if (typeof document === 'undefined') { // @ts-ignore global.document = { querySelector: function () {}, }; }

1reaction

roger-ngxcommented, Jan 16, 2021

I had the problem with another project. My way to solve this was:

_app.tsx -> add following after your imports:

if (typeof document === 'undefined') { // @ts-ignore global.document = { querySelector: function () {}, }; }

thank bro, that fixed my problem when using window.navigator