“Uncaught TypeError: Super expression must either be null or a function” - based on my code, why am I getting this error?

I'm trying to setup a modal with React. I'm using code that is more or less taken from their docs. I'm not sure why I'm getting this error: "Uncaught TypeError: Super expression must either be null or a function." I've poked around and I've noticed this error usually appears when people forget to capitalize "Component" when setting up a class - class Modal extends React.Component - but that doesn't appear to be my problem.

I have React 16.6 and React-dom 16.6 as dependencies. Perhaps I don't have the most updated version of React and it's causing issues? Perhaps there is something else going on in my other files that reference this Modal that is causing the problem? Either way, I don't have a clear path to fixing this error because I don't know what is wrong, based on the error messaging in Chrome dev tools. My terminal isn't providing any error messaging either. I'm lost.

import React from "react";
import { createPortal } from "react-dom";

const modalRoot = document.getElementById(“modal”);

class Modal extends React.Compoment {
constructor(props) {
super(props);
this.el = document.createElement(“div”);
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return createPortal(this.props.children, this.el);
}
}

export default Modal;

The Modal should automatically render as soon as the application is started in the browser (yes, I’m aware that Modals can be pretty annoying for users but I’m still trying to learn how to make one on React)

#reactjs

7 Likes128.20 GEEK