我的控制台显示此错误“未捕获的语法错误：无法在模块外使用导入语句（位于 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

This is my code

When i start the server it shows compiled successfully but nothing shows on the screen and when i open the console it shows "Uncaught SyntaxError: Cannot use import statement outside a module (at bundle.js:47878:2)" I tried adding "type":"module" into the package.json file as shown inn somethreads but still not useful

Answer 1

The issue is, the browser cannot use modules so you need a bundler like ( Browserify or Vite ) which bundles your modules and code into a single file so it can be used by the browser. More information about modules and bundlers here