I am trying to configure a react frontend with a django backend and everything is fine, it complies, it loads etc.

The issue i am facing is that my react component is unable to find the actual index.html document Uncaught ReferenceError: root is not defined

my react app is constructed the standard way

 in ./src/components/App.js

//proper imports up here {react, reactDOM} 

export default function App(){
  return (
    <h1>hello world</h1>
  )
}

root = reactDOM.createroot(document.getElementById('root))

root.render(<App />)

In my index.js located in .src/index.js

import App from './components/App.js'

and my webpack config file points to this index.js file

Yes, I have ensured there is a div with an id of root in my boilerplate HTML

The django backend compiles fine, and using webpack/babel things seem to be fine on that end. Bu that error is what pops up in the chrome console upon loading.

The urls and views are properly set up and any html/css I add to the page displays as expected

Thank you in advance