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

Question

我的环境：

• React v17.0.2
• 节点 v16.6.1
• npm v7.20.3
• VS 代码
• Windows 10

问题：

我目前正在为一个朋友的网站开发一个烹饪食谱应用程序。我的问题是，每当我在我的终端中输入“节点 fileName.js”到 运行 并检查我的代码的 console.log 和其他输出时，终端总是会出现以下错误：

错误信息：

[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

我的代码本身在 http://localhost:3000/ 上运行良好，但我想知道是否有人知道如何修复 React 项目中的“SyntaxError: Unexpected token '<'”问题，因为它妨碍 testing/debugging 代码。

PS: 这是整个文件的内容

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