javascript – mme sale el errormodales_productos.js:37 Uncaught TypeError: Cannot read property ‘classList’ of null at HTMLButtonElement. (modales_pr

Estoy tratando de llamar una clase css con js para mostrar mi ventana nodal pero me aparece el siguiente error
modales_productos.js:37 Uncaught TypeError: Cannot read property ‘classList’ of null
at HTMLButtonElement. (modales_productos.js:37)
Realmente ya he usado las nodales de esta forma anteriormente y esta es la primera vez que me genera un error a continuación el código:

js:

  const container_add_product = document.getElementById("container_add_product");
const button_add_product = document.getElementById("button_add_product");
const close_add_product = document.getElementById("close_add_product");

button_add_product.addEventListener("click", () => {
    container_add_product.classList.add("mostrar");
    form_add_product.classList.add("mostrar");
});

close_add_product.addEventListener("click", () => {
    form_add_product.classList.remove("mostrar");
    container_add_product.classList.remove("mostrar");
});

html:

<div class="container_add_product">
          <form  action="http://localhost/reservaya-mvc/app/models/admin/productos/verificar_agregar_productos.php" method="post"  class="contact" id="form_add_product"  enctype="multipart/form-data" autocomplete="OFf">
            <h3> <i class="close-modal-product fa fa-times-circle fa-2x" id="close_add_product"></i></h3>
            <label for="NOMBRE_PRODUCTO">Nombre producto</label>
            <br>
            <input type="text" maxlength="70" required="" class="NOMBRE_CATEGORIA_PRODUCTO" name="NOMBRE_PRODUCTO" id="NOMBRE_PRODUCTO">
            <br>
            <label for="DESCRIPCION_PRODUCTO">Descripción del producto</label>
            <br>
            <textarea name="DESCRIPCION_PRODUCTO" id="DESCRIPCION_PRODUCTO" class="DESCRIPCION_PRODUCTO" cols="30" rows="10"></textarea>
            <br>
            <label for="CANTIDAD_PRODUCTO">Cantidad producto</label>
            <br>
            <input type="number" min="1" id="CANTIDAD_PRODUCTO" name="CANTIDAD_PRODUCTO"
            class="CANTIDAD_PRODUCTO">
            <br>
            <label for="VALOR_PRODUCTO">Valor producto</label>
            <br>
            <input type="number" min="1" name="VALOR_PRODUCTO" id="VALOR_PRODUCTO"
            class="VALOR_PRODUCTO">
            <br>
            <label for="ID_CATEGORIA_PRODUCTO">Categoria</label>
            <br>
             <select name="ID_CATEGORIA_PRODUCTO" class="categoria_producto" required="">
                    <option value="">Seleccionar</option>
                    <?php
                    foreach ($category as $resultado_category) {
                    ?>
                      <option id="opcion_editar_categoria" value="<?php echo $resultado_category('ID_CATEGORIA_PRODUCTO') ?>"><?php echo $resultado_category('NOMBRE_CATEGORIA_PRODUCTO') ?></option>
                    <?php
                    }
                    ?>
              </select>
            <br>
            <label for="IMAGEN_PRODUCTO ">Imagen producto</label>
            <br>
            <input type="file" name="IMAGEN_PRODUCTO" id="IMAGEN_PRODUCTO "
            class="IMAGEN_PRODUCTO" accept="image/png, .jpeg, .jpg, image/gif">
            <br>
            <input type="submit" value="Enviar" id="submit">
          </form>
        </div>