I am trying to build a project with a hybrid architecture with Django as Backend and React as Frontend. For this I use Webpack and Babel to pipe the js files into djangos static index-bundle.js. However I encountered a problem which I don't understand. Apparently I can not import other components into my index.js react file. Instead, the root div stays empty.
While this works and the text is visible in the Browser...
ReactDOM.render(
<h1> React in Django </h1>
document.getElementById('root')
);
... importing it from another component doesn't work (div "root" has no inner elements)
ReactDOM.render(
<App />,
document.getElementById('root')
);
class App extends Component {
render() {
return (
<h1>React in Django</h1>
)
}
}
In the end I want to have the "normal" react behaviour inside the django project.
Thanks to @jkarttunen answers in This Question I found the solution:
Turned out that the Problem was that Babel and React 17 require the setting "runtime":"automatic".
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", {"runtime": "automatic"}]
]
}