SSR error - ReferenceError: document is not defined

Hi!

I'm new to both Nuxt UI and SSR, so maybe I'm just missing something, but...

I'm using Nuxt UI Pro with Inertia and Laravel
I have set up SSR, and I can build the application just fine and also start the SSR server
But! When I try to access a page, I get this error:

ReferenceError: document is not defined
    at /bootstrap/ssr/ssr.js:249:17

ReferenceError: document is not defined
    at /bootstrap/ssr/ssr.js:249:17

The

/bootstrap/ssr/ssr.js

/bootstrap/ssr/ssr.js

file is the output from the build

The code on line 249:

const style = document.createElement("style");

const style = document.createElement("style");

Which is inside this if-statement:

if (nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
  const style = document.createElement("style");
  style.innerHTML = root.value;
  style.setAttribute("data-nuxt-ui-colors", "");
  document.head.appendChild(style);
  headData.script = [{ innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))" }];
}

if (nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
  const style = document.createElement("style");
  style.innerHTML = root.value;
  style.setAttribute("data-nuxt-ui-colors", "");
  document.head.appendChild(style);
  headData.script = [{ innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))" }];
}

I'm a bit stuck, and don't know what to search for, as my previous attempts gave me no real results

Does anyone know what I should be doing differently or where to go from here?

Nuxt•10mo ago•

4 replies

Peter Brinck

SSR error - ReferenceError: document is not defined

Hi!

ReferenceError: document is not defined
    at /bootstrap/ssr/ssr.js:249:17

ReferenceError: document is not defined
    at /bootstrap/ssr/ssr.js:249:17

The

/bootstrap/ssr/ssr.js

/bootstrap/ssr/ssr.js

file is the output from the build

The code on line 249:

const style = document.createElement("style");

const style = document.createElement("style");

Which is inside this if-statement:

if (nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
  const style = document.createElement("style");
  style.innerHTML = root.value;
  style.setAttribute("data-nuxt-ui-colors", "");
  document.head.appendChild(style);
  headData.script = [{ innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))" }];
}

if (nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
  const style = document.createElement("style");
  style.innerHTML = root.value;
  style.setAttribute("data-nuxt-ui-colors", "");
  document.head.appendChild(style);
  headData.script = [{ innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))" }];
}

I'm a bit stuck, and don't know what to search for, as my previous attempts gave me no real results

Does anyone know what I should be doing differently or where to go from here?

SSR error - ReferenceError: document is not defined

SSR error - ReferenceError: document is not defined

Similar Threads