Uncaught Invariant Violation: _registerComponent(…): Target container is not a DOM element.

Trying to setup Webpack but keep getting “Target container is not a DOM element.” when rendering the page. bundle.js was created successfully and I can see that both hello.jsx and world.jsx contents are available within the file. Can anyone please help me up?

Here’s my webpack.config.js

var path = require(“path”)
var webpack = require(‘webpack’)
module.exports = {
context: __dirname,
entry: ‘./src/js/main’,
output: {
path: path.resolve(‘./dist/js/’),
filename: “bundle.js”,
},
module: {
loaders: [
{ test: /.jsx?$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
query:
{
presets:[‘es2015’, ‘react’]
}
}
],
},
}

My main.js

import Hello from ‘./hello.jsx’;
import World from ‘./world.jsx’;

My hello.jsx

import React from ‘react’;
import ReactDOM from ‘react-dom’;

class Hello extends React.Component {
render() {
return <h1>Hello</h1>
}
}

ReactDOM.render(<Hello/> ,document.getElementById(‘hello’));

My world.jsx

import React from ‘react’;
import ReactDOM from ‘react-dom’;

class World extends React.Component {
render() {
return <h1>World</h1>
}
}

ReactDOM.render(<World/> ,document.getElementById(‘world’));

Displaying through a very simple html.

`<script src=”{%% static ‘dist/js/bundle.js’ %%}”></script>

`,,,