React index.js in Django Project doesn't render imported components

Question

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.

score 0 · Accepted Answer · answered Apr 07 '22 at 11:47

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"}]
     ]
}

React index.js in Django Project doesn't render imported components

1 Answers1