My Env.:
- React v17.0.2
- node v16.6.1
- npm v7.20.3
- VS Code
- Windows 10
The Problem:
I am currently working on a cooking recipe app for a friend’s website. My issue is that whenever I enter “node fileName.js” into my terminal to run and check the console.log’s and other outputs for my code, the terminal always trows out the following error:
Error Message:
[Running] node "c:Users...Desktop...srcApp.js"
file:///c:/Users/.../Desktop/.../src/App.js:6
<div className="App">
^
SyntaxError: Unexpected token '<'
at Loader.moduleStrategy (node:internal/modules/esm/translators:146:18)
at async link (node:internal/modules/esm/module_job:67:21)
[Done] exited with code=1 in 0.404 seconds
TLDR
My code itself works fine on http://localhost:3000/, but I was wondering if anybody has an idea how to fix a “SyntaxError: Unexpected token ‘<‘” issue in a React project, since it gets in the way of testing/debugging code.
PS: This is the content of the whole file
import './App.css';
import recipeCards from './components/functional/recipe-cards';
function App() {
return (
<div className="App">
<header className="App-header">
<p>This is a header</p>
<nav>
<p>This is a nav</p>
</nav>
</header>
<main>
<p>This is the main content</p>
<section>
<p>This is a section</p>
{recipeCards}
</section>
</main>
<footer>
<p>This is the footer</p>
</footer>
</div>
);
}
export default App;
Advertisement
Answer
Solved the issue by importing React at the top of the file:
import React from 'react';