React应用报错：Uncaught SyntaxError: 无法在模块外使用import语句

一、解决"Cannot use import statement outside a module"报错 #

• 移除package.json中的"type":"module"配置：React项目（尤其是通过Create React App搭建的）不需要该配置，它会与Webpack的模块处理逻辑冲突，导致编译后的代码仍保留未转译的import语句。
• 清理缓存并重新安装依赖：
  1. 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）文件
  2. 执行npm install（或yarn install）重新安装依赖
  3. 重启开发服务器
• 若为手动配置的Webpack项目：
  确保webpack.config.js中配置了正确的Babel loader转译ES6模块语法，示例配置片段：

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
  

二、修复页面无内容的代码问题 #

你的表格结构违反HTML规范，在map循环中每次返回一个<tbody>标签，导致浏览器无法正确渲染表格内容。修正后的代码如下：

import axios from 'axios';
import React, { useEffect, useState } from 'react'
import Navbar from './Navbar'

const Home = () => {
    const [Employeelist, setEmployeelist] = useState([]);
    useEffect(() => {
        getData();
    }, [])
    const getData = () => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then((response) => {
                console.log(response.data)
                setEmployeelist(response.data)
            })
            .catch(err => console.error(err)) // 添加错误捕获便于调试
    }

    return (
        <div>
            <Navbar />
            <br /><br />
            <div className="container">
                <div className="row">
                    <div className="col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                        <div className="row g-4">
                            <div className="col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                <h2 style={{ textAlign: "center", textDecoration: "underline", fontStyle: 'italic' }}>Employee data</h2>
                                <table className="table table-success table-striped table-hover" style={{ border: 'solid 2px black', borderRadius: '20px !important' }}>
                                    <thead className="table-dark">
                                        <tr>
                                            <th scope="col">id</th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Email</th>
                                        </tr>
                                    </thead>
                                    {/* 将tbody移至循环外部，仅循环渲染tr */}
                                    <tbody className="table-group-divider">
                                        {Employeelist.map((value) => {
                                            return (
                                                <tr key={value.id}> {/* 添加唯一key属性，符合React规范 */}
                                                    <th scope="row">{value.id}</th>
                                                    <td>{value.name}</td>
                                                    <td>{value.email}</td>
                                                </tr>
                                            )
                                        })}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home

额外优化说明：

• 将var替换为const声明状态变量，符合React最佳实践
• 为map循环元素添加唯一key属性，避免React警告
• 在catch中添加错误日志，便于排查请求失败问题

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