React component not rendering in django index html template

user_8451225 0
Viewed 154

Index html:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Babon</title>
</head>
<body>
  <div id="App">
      <!-- React will load here -->
  </div>
</body>
{% load static %}
<script src="{% static 'frontend/main.js' %}"></script>
</html>

Index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

When I run my server I can see that the div is rendering with the "React will load here" message fine but my component doesn't seem to be rendering.

Any ideas?

Getting this error in the console:

index.tsx:4 Uncaught Error: Cannot find module './App'
    at webpackMissingModule (index.tsx:4)
    at eval (index.tsx:4)
    at Object../src/index.tsx (main.js:19)
    at __webpack_require__ (main.js:133)
    at main.js:156
    at main.js:158

Maybe this is an issue with my tsx files being properly compiled?

typescript reactjs django python
1 Answers

You should have a file called App.tsx in the same directory of index.tsx in this way you could configurate the call on top of the index file.

import App from './App';
user_71756180
Related