I’m getting "Uncaught Error: ...registerComponent(...): Target container is not a DOM element.(...)
My main.html
is not loading. I don’t know why.
/client/main.html
<head>
<title>Title</title>
</head>
<body>
<div id="root"></div>
</body>
/client/main.js
import '../imports/startup/client';
/imports/startup/client/index.js
import './routes.js';
/imports/startup/client/routes.js
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import { AppLayout } from '../../ui/layouts/App';
import { Index } from '../../ui/pages/Index';
Meteor.startup(() => {
render(
<Router history={ browserHistory }>
<Route component={ AppLayout }>
<Route path="/" component={ Index } />
</Route>
</Router>,
document.getElementById('root')
);
});
/imports/ui/layouts/App.jsx
import React from 'react';
export const App = props => {
console.log(props)
return (
<div id="app-layout">
<header id="header-layout">
</header>
<main id="main-layout">
</main>
<footer id="footer-layout">
</footer>
</div>
)
};
I know that I didn’t load children props in AppLayout
but the problem is before that. main.html
is not even showing up. Even the title is localhost:3000
instead of being Title
.
I’m using thereactivestack/meteor-webpack.
Can someone tell me why?