React problem: No idea what I'm missing

React
1

While I can run the react app I get the blank web page. If I change the index.html to this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vitezzzzzzz + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

The zzzzz doesn’t appear. Also, the message doesn’t appear from Message.tsx.

2

I think with Vite, you have to relaunch it whenever you make changes to index.html and sometimes major changes to you App.tsx.

So, try killing and then launching your Vite app again.

3

I’ll try that after I get back from work.

4

I thought I killed it and restarted but this is what happens:

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
N:\vite-project\src\App.tsx: Identifier ‘App’ has already been declared. (10:9)

8 | import Message from ‘./Message’;
9 |

10 | function App() {
| ^
11 | return

;
12 | }
13 |
7:41:41 PM [vite] Internal server error: N:\vite-project\src\App.tsx: Identifier ‘App’ has already been declared. (10:9)

8 | import Message from ‘./Message’;
9 |

10 | function App() {
| ^
11 | return

</d (and more of the same)

5

The error message indicates that the identifier “App” has already been declared. This usually means that there is another variable or function with the same name declared somewhere else in the same scope or file.

To fix this issue, you can check if there is another variable or function with the same name declared before the current declaration of “App” and either rename one of them or remove the duplicate declaration.

It is also possible that the import statement for the component “App” is being imported multiple times. In this case, you can ensure that the import statement for “App” is only included once in the file where it is used.

1 Like