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';