Uncaught SyntaxError: Unexpected token in JSX

1

I am using Parcel to build my React app. It’s throwing a syntax error: unexpected token.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<div id="root">not rendered</div>
	<script type="text/babel" src="./App.js"></script>
</body>

</html>

App.js

import React from 'react';
import { render } from 'react-dom';
import { Pet } from './Pet';

const App = () => {
	return (
		<div>
			<h1 class="heading">Adopt Me!</h1>
			<Pet name="Luna" animal="Dog" breed="Havanese" />
			<Pet name="Pepper" animal="Bird" breed="Cockaitiel" />
			<Pet name="Doink" animal="Cat" breed="Mixed" />
		</div>
	);
};
render(<App />, document.getElementById('root'));

Error shown by Parcel in terminal:
image

I looked at this post but it didn’t work for me. How can I fix this?

2

I can’t see anything wrong with your code, by looking at it. When I plug that code into a working React app, it works fine.

I haven’t used Parcel before so I don’t know it. But if it can’t read the opening bracket of the HTML, that makes me think that it can’t parse the React, like either React or one of the Babel plugins are not installed correctly,