Add plain javascript in all pages #2927

salahy · 2021-11-07T12:00:18Z

salahy
Nov 7, 2021

Hello,
I am trying to add shared script in all pages, not sure what is the best way to do it, I tried to add it on document file but in the doc it says don't add it there.

Thank you

beerose · 2021-11-08T12:36:37Z

beerose
Nov 8, 2021

Hey,

There's a Script component that you can use: https://blitzjs.com/docs/script-component. If you want to add it to all the pages you can use DocumentHead (instead of Head) in the _document file.

4 replies

salahy Nov 8, 2021
Author

Hi,
Thank you for your answer, I already tried that but I am getting
ReferenceError: document is not defined when I add to DocumentHead, I am trying simple javascript code to test it, but if I add this script in all pages it works

beerose Nov 8, 2021

This error usually happens when the code runs on the server, while document is only available in the browser. Do you get this error from your code or from some Blitz internals?

salahy Nov 8, 2021
Author

This is example of the code

import { Document, Html, DocumentHead, Main, BlitzScript} from "blitz"
import { Header } from "core/components/Header"
import { Footer } from "core/components/Footer"
import { Script } from "blitz"
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <DocumentHead>
          <Script>{`alert("hello")`}</Script>
        </DocumentHead>
        <body>
          <Header />
          <Main />
          <BlitzScript />
          <Footer />
        </body>
      </Html>
    )
  }
}
export default MyDocument

This will not trigger the alert, if I add strategy="beforeInteractive" to the script, it will show the error page

ReferenceError: document is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

beerose Nov 8, 2021

Ok, I'm sorry, I was wrong about the _document file. I missed the note in the docs:

<Script> must not be placed in either a <Head> component or in _document.js.

So you can either put it in all the pages, or in a layout component, something like:

const Layout = ({ title, children }: LayoutProps) => {
  return (
    <>
      <Script>{`alert("hello")`}</Script>
      {children}
    </>
  )
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add plain javascript in all pages #2927

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Add plain javascript in all pages #2927

salahy Nov 7, 2021

Replies: 1 comment · 4 replies

beerose Nov 8, 2021

salahy Nov 8, 2021 Author

beerose Nov 8, 2021

salahy Nov 8, 2021 Author

beerose Nov 8, 2021

salahy
Nov 7, 2021

Replies: 1 comment 4 replies

beerose
Nov 8, 2021

salahy Nov 8, 2021
Author

salahy Nov 8, 2021
Author