我的控制台显示此错误“未捕获的语法错误：无法在模块外使用导入语句（位于 bundle.js:47878:2）”。 我正在构建一个 React 应用程序

Question

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

import Navbar from './Navbar'

    const Home = () => {
        var [Employeelist,setEmployeelist] = useState([]);
        useEffect(()=>{
          getData();
        },[])
        const getData=()=>{
            axios.get('https://jsonplaceholder.typicode.com/users')
            .then((response)=>{
              console.log(response.data)
                    setEmployeelist(response.data)
            })
            .catch()
        }
        
      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 class="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>
     {Employeelist.map((value,index)=>{
        return  <tbody class="table-group-divider">
        <tr>
          <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

这是我的代码

当我启动服务器时，它显示编译成功但屏幕上没有任何显示，当我打开控制台时它显示“未捕获的语法错误：无法在模块外使用导入语句（在 bundle.js:47878:2）”我尝试添加“类型":"module" 进入 package.json 文件，如 inn somethreads 所示，但仍然没有用

Answer 1

问题是，浏览器不能使用模块，所以你需要一个像（ Browserify或Vite ）这样的捆绑器，它将你的模块和代码捆绑到一个文件中，以便浏览器可以使用它。 有关模块和捆绑器的更多信息，请参见此处