import React, { useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import statement outside a module

Question

I want to import my react component in my node but it throwing an error. It imports react component after that it show error in react component when there is import a file using common type. following is my node js code. `

import { createRequire } from "module";
const require = createRequire(
    import.meta.url);


const http= require ("http");
const express= require("express");
const cors= require("cors");
const socketIO=require("socket.io");
const { user } = require("../src/component/Join/Join.js");
const app=express();
const port=4500 || process.env.PORT;


const users=[{}];

app.use(cors());

app.get("/",(req,res)=>{
    res.send("Hello detective its working now");
})

const server=http.createServer(app);
const io=socketIO(server);

io.on("connection",(socket)=>{
    console.log("New Connection");
    socket.on("Joined",({user})=>{ //  on means data receive--user destructring and receiving 
        users[socket.id]=user;                           //data from chat user
        console.log(`${user} has joined`);
        socket.broadcast.emit("userJoined",{user:"Admin",message:`${user[socket.id]} has joined`})    // broadcast means khud ko  chhod ke dusre users ko 
        socket.emit("welcome",{user:"Admin",message:`Welcome to the chat,${user[socket.id]}`})
    })

    socket.on("message",({message,id})=>{
        io.emit("sendMessage",{user:user[id],message,id})
    })
    
    
socket.on("disconnect",()=>{
    socket.broadcast.emit("leave",{user:"Admin",message:`${user[socket.id]} has left`})
    console.log("User left");
});





});
server.listen(port,()=>{
    console.log(`server is running on  http://localhost:${port}`);
})

`

and I am trying to connect with react following code `

import React, { useState } from 'react';
import "./Join.css";
import logo from "../../Images/logo.png";
import { Link } from 'react-router-dom';


let user;
const SendUser=()=>{
    user=document.getElementById("Joininput").value;
    document.getElementById("Joininput").value ="";
}

const Join = () => {
    const [name, setname] = useState("");
  return (
    <div className='Joincontainer'>
        <div className="Joinpage">
            <img src={logo} alt="logo" />
            <h1>Mongo Chat</h1>
            <input onChange={(e)=>setname(e.target.value)} type="text" id="Joininput" placeholder='Enter Your Name'/>
            <Link onClick={(e)=>!name ? e.preventDefault():null} to="/chat"> <button onClick={SendUser} className='Joinbtn'>Join In</button></Link>
        </div>
    </div>
  )
}

export {Join}
export {user}

`

but it throws following error in node.

`

import React, { useState } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at file:///D:/Lakshman/Js%20Code/Chat_App/cchat/server/index.js:10:18
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)

`

I want to it use module and common export in same file.