Eventlistener is not listening

I am trying to make a interactive landing page and I am working on javascript and for some reason it's not working. I have each linked to the html page, and my IDE (IntelliJ) says they are loading. So on hover nothing happens

Error it gives me is "Expression is expected"

const left = document.querySelector(".left");
const right = document.querySelector(".right");
const container = document.querySelector(".container");

left.addEventListener("mouseenter", () => {
     container.classList.add("hover-left");
});

CSS code:

.split.left {
    left:0;
    background: url('https://image.ibb.co/m56Czw/designer.jpg') center center no-repeat;
    background-size: cover;
}

.hover-left .left {
    width: var(--hover-width);
}

This is what I am going off of: https://codepen.io/bradtraversy/pen/dJzzdB

And I have even tried that exact code and it's the same problem.