React index.js в проекте Django не отображает импортированные компоненты

Я пытаюсь создать проект с гибридной архитектурой с Django в качестве Backend и React в качестве Frontend. Для этого я использую Webpack и Babel для передачи js файлов в djangos static index-bundle.js. Однако я столкнулся с проблемой, которую не могу понять. Очевидно, я не могу импортировать другие компоненты в файл index.js react. Вместо этого корневой div остается пустым.

Пока это работает и текст виден в браузере...

ReactDOM.render(
    <h1> React in Django </h1>
    document.getElementById('root')
);

... импорт из другого компонента не работает (div "root" не имеет внутренних элементов)

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

class App extends Component {
    render() {
        return (
            <h1>React in Django</h1>
        )
    }
}

В итоге я хочу иметь "нормальное" поведение react внутри проекта django.

Благодаря ответам @jkarttunen в Этот вопрос я нашел решение:

Оказалось, что проблема в том, что Babel и React 17 требуют настройки "runtime": "automatic".

{
     "presets": [
         "@babel/preset-env",
        ["@babel/preset-react", {"runtime": "automatic"}]
     ]
}
Вернуться на верх