Skip to content

When I enter the terminal command “$ node fileName.js” the concole throws out a “SyntaxError: Unexpected token ‘<'" error

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;

Answer

Solved the issue by importing React at the top of the file:

import React from 'react';