Capitolo 2 - file react.html - Uncaught SyntaxError: Unexpected token '<' #1

Teopando · 2023-03-12T11:55:11Z

Teopando
Mar 12, 2023

Io ho provato a inserire Babel all'interno della pagina HTML react.html ma nonostante questo il browser mi segna lo stesso errore "Uncaught SyntaxError: Unexpected token '<'" come se non riuscisse ad interpretare il JSX.
Qualcuno riscontra lo stesso problema?

Teopando · 2023-03-12T12:09:35Z

Teopando
Mar 12, 2023
Author

Per intenderci l'ho scritto come sotto ma aprendolo con il browser non funziona (la parte commentata dell'header è perchè volevo testare la pagina tenendo le librerie salvate in locale ma non è servito):

	<script type="text/javascript">
	
	function AppTitle () {
	  return ( <h1> Todo app </h1> );
	}

	function AppMessage() {
	  return ( <p>Benvenuto!</p> );
	}

	function App() {
	  return (
		<div>
		  <AppTitle />
		  <AppMessage />
		</div>
	  );
	}
		
	const root = ReactDOM.createRoot(document.getElementById("root"));
	root.render(<App />);

	</script>
</body>

0 replies

Teopando · 2023-03-12T12:38:16Z

Teopando
Mar 12, 2023
Author

Soluzione trovata, il tag script va impostato come type="text/babel" e tutto si risolve :)

0 replies

lifeisfoo · 2023-03-12T14:42:49Z

lifeisfoo
Mar 12, 2023
Maintainer

Ciao @Teopando, sei riuscito a trovare un refuso che mi è proprio sfuggito...
Grazie di averlo segnalato subito!

Questa è la versione completa e corretta del file react.html del secondo capitolo.

<html>
  <head>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- qui deve essere text/babel e non text/javascript -->
    <script type="text/babel"> 
      function AppTitle() {
        return <h1> Todo app </h1>;
      }

      function AppMessage() {
        return <p>Benvenuto!</p>;
      }

      function App() {
        return (
          <div>
            <AppTitle />
            <AppMessage />
          </div>
        );
      }

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

1 reply

neoSnakex34 Sep 1, 2024

Ero appena incappato nello stesso problema e son venuto a controllare se fosse stato segnalato, felice che lo sia. Manuale molto interessante e di facile comprensione per frontend developer!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Capitolo 2 - file react.html - Uncaught SyntaxError: Unexpected token '<' #1

{{title}}

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Capitolo 2 - file react.html - Uncaught SyntaxError: Unexpected token '<' #1

Teopando Mar 12, 2023

Replies: 3 comments · 1 reply

Teopando Mar 12, 2023 Author

Teopando Mar 12, 2023 Author

lifeisfoo Mar 12, 2023 Maintainer

neoSnakex34 Sep 1, 2024

Teopando
Mar 12, 2023

Replies: 3 comments 1 reply

Teopando
Mar 12, 2023
Author

Teopando
Mar 12, 2023
Author

lifeisfoo
Mar 12, 2023
Maintainer