React导入语句报错排查：模块外无法使用import

问题背景 #

编写了如下React组件代码，原本页面无法渲染，在HTML中引入指定CDN并注释import语句后可正常运行，但直接用Node.js运行时出现模块语法错误。

组件代码 #

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"));

可正常运行的CDN配置（需注释import语句） #

<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.js运行时的错误信息 #

(node:18960) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
c:\Users\KIIT\Desktop\PROJECTS\React codecamp\index.js:1
import React from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49

Node.js v20.10.0

原因分析 #

1. 模块系统不兼容：Node.js默认将.js文件识别为CommonJS模块，而import是ES模块（ESM）的专属语法，直接运行会触发语法错误。
2. CDN方式的特殊性：通过CDN引入的是UMD格式的React包，该格式兼容浏览器环境，同时Babel Standalone会在浏览器中实时转译JSX和ES模块语法，此时注释import语句后，代码直接使用全局变量React和ReactDOM，不需要Node.js的模块系统处理，因此能正常运行。

解决方案 #

方案1：配置package.json启用ES模块 #

在项目根目录的package.json中添加"type": "module"字段，让Node.js将所有.js文件当作ES模块处理：

{
  "type": "module"
}

方案2：修改文件扩展名 #

将index.js重命名为index.mjs，Node.js会自动将.mjs文件识别为ES模块，无需额外配置。

方案3：改用CommonJS语法 #

如果不想切换到ES模块，可将import语句替换为CommonJS的require语法：

const React = require('react');
const ReactDOM = require('react-dom');

注意：使用CommonJS或ES模块语法时，需要先通过npm install react react-dom在本地安装React依赖，而CDN方式无需本地安装，直接在浏览器引入即可。

内容的提问来源于stack exchange，提问作者someRandom_ITguy