Script tag not appearing

New Member
2 0 0

I am trying to display a banner under the header using a script tag. I am using the app created from the Shopify CLI using node. 

I used the script tag API to add the script tag:


    "script_tags": [
            "id": 174240039086,
            "src": "",
            "event": "onload",
            "created_at": "2021-06-28T01:23:17-04:00",
            "updated_at": "2021-06-28T01:23:17-04:00",
            "display_scope": "all",
            "cache": false


And I added a <div id="script-app"></div> in the theme.

Here is my /pages/script_tag.js file:


import React from 'react';
import ReactDOM from 'react-dom';

class TestScriptTag extends React.Component {
    constructor() {

    render() {
        return (
                <p>this is a bar</p>

 ReactDOM.render(<TestScriptTag />, document.getElementById('script-app'));

export default TestScriptTag;


I am getting the error: document not defined. I think this is due to server side rendering, so I thought I could get around it by doing this:


 if (typeof window !== "undefined") {
   ReactDOM.render(<TestScriptTag />, document.getElementById('script-app'));


But still nothing shows up. Can anyone help? I feel like I'm missing something stupid.