当我输入终端命令“$ node fileName.js”时，concole 会抛出“SyntaxError: Unexpected token '<'”错误

Question

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\...\src\App.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 1

通过在文件顶部导入 React (import React from 'react') 解决了该问题。