请检查为什么导入反应不起作用

Question

import React from "react";
import ReactDOM from "react-dom";

function Header(){
    return(
        <header>
        <nav className="nav">
            <img src="react.png" className="nav-logo"></img>
            <ul className="nav-items">
                <li>Pricing</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav> 
    </header>
    )
}
function Footer(){
    return(
        <footer className="footer">
            <small><p className="foot-text">all rights reserved.</p></small> 
        </footer>
    )
}
function MainContent(){
    return(
        <div className="main-content">
         <h1 className="main-head">I LOVE REACT! because:</h1>
                <ol>
                    <li>it is declarative</li>
                    <li>we can work on composable pieces and then<br/>bind them together to make a whole.</li>
                    <li>it supports dynamic rendering</li>
                    <li>supports jsx</li>
                </ol>
        </div>
    )
}
function Page(){
    return(
        <> 
                <Header/>
                <MainContent/>  
                <Footer/>
            </>
          
       

    )
}
//<> </> =fragment <div> can also be used
ReactDOM.render(<Page/>,document.getElementById("root"));

实际上输出不会渲染到屏幕上，但如果我将 cdns 包含到 html 中并注释导入语句，那么它就可以完美工作

html 文件中导入的cdns 为：

<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

错误

(node:18960) 警告：要加载 ES 模块，请在 package.json 中设置 "type": "module" 或使用 .mjs 扩展名。 （使用

node --trace-warnings ...

显示警告的创建位置） c:\Users\KIIT\Desktop\PROJECTS\React codecamp\index.js:1 从“反应”导入反应； ^^^^^^

语法错误：无法在模块外部使用 import 语句 在internalCompileFunction（节点：内部/vm：77：18） 在wrapSafe（节点：内部/模块/cjs/loader：1288：20） 在 Module._compile （节点：内部/模块/cjs/loader：1340：27） 在 Module._extensions..js （节点：内部/模块/cjs/loader：1435：10） 在Module.load（节点：内部/模块/cjs/loader：1207：32） 在 Module._load （节点：内部/模块/cjs/loader：1023：12） 在 Function.executeUserEntryPoint [作为 runMain] （节点：内部/模块/run_main：135：12） 在节点：内部/主/run_main_module：28：49

Node.js v20.10.0

Answer 1

将

"type":"module"

添加到您的

package.json

文件中。