一遍又一遍地出现相同的错误语法错误：无效或意外的标记

Question

我一直在尝试运行我的index.mjs 文件，但总是遇到同样的错误。这是我的 index.mjs 文件：

import WebSocket, { WebSocketServer } from "ws";
import http from "http";
import express from 'express';
import { fileURLToPath } from 'url';
import { dirname } from 'path';
import React from 'react';
import ReactDOM from 'react-dom';
import ChatButton from 'ChatButton';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const app = express();
const server = http.createServer(app);

const wss = new WebSocketServer({ server });

// Keep track of connected clients
const clients = new Set();

wss.on('connection', (ws) => {
    console.log('Client connected');

    // Receive and store the username from the client
    ws.on('message', (message) => {
        const data = JSON.parse(message);

        if (data.type === 'username') {
            ws.username = data.username;
            // Notify all clients about the updated user list
            broadcastUserList();
        }
    });

    // Add the new client to the set
    clients.add(ws);

    // Notify all clients about the updated user list
    broadcastUserList();

    ws.on('message', (message) => {
        // Parse the message
        const data = JSON.parse(message);

        // Check message type
        switch (data.type) {
            case 'chat':
                // Broadcast the chat message to all clients
                broadcastMessage({ type: 'chat', message: data.message });
                break;
            case 'typing':
                // Broadcast typing status to all clients
                broadcastMessage({ type: 'typing', username: data.username, isTyping: data.isTyping });
                break;
            default:
                break;
        }
    });

    ws.on('close', () => {
        console.log('Client disconnected');

        // Remove the client from the set
        clients.delete(ws);

        // Notify all clients about the updated user list
        broadcastUserList();
    });
});

function broadcastMessage(message) {
    // Broadcast the message to all clients
    wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify(message));
        }
    });
}

function broadcastUserList() {
    // Create an array of usernames
    const userList = Array.from(clients).map((client) => {
        return { username: client.username, online: client.readyState === WebSocket.OPEN };
    });

    // Broadcast the updated user list to all clients
    broadcastMessage({ type: 'userList', userList });
}

// Define the App component
const App = () => {
    return (
        <div>
            {/* Your existing website content */}
            <h1>Welcome to Your Website</h1>

            {/* Include the ChatButton component */}
            <ChatButton />

            {/* Other components or content */}
        </div>
    );
};

// Render the App component
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

// Serve the HTML file
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// Start the server
server.listen(3000, () => {
    console.log('Server listening on http://localhost:3001');
});

它会引发此块的错误：

const App = () => {
    return (
        <div>
            {/* Your existing website content */}
            <h1>Welcome to Your Website</h1>

            {/* Include the ChatButton component */}
            <ChatButton />

            {/* Other components or content */}
        </div>
    );
};

使用聊天 gpt 我尝试使用 babel 或 esm。我还尝试将 mjs 更改为 jsx，包括packages.json 中所有需要的更改，但它始终引发相同的错误。这是它自己的错误：

[文件:///C:/Users/leoni/WebstormProjects/chatbuttontest/index.mjs:93 ^

语法错误：无效或意外的标记]

Node.js v21.2.0

提前致谢！

Answer 1

如果您在ChatButton组件中使用过

export default

使用

import ChatButton from './ChatButton'

否则使用

import {ChatButton} from './ChatButton'

而不是

import ChatButton from 'ChatButton';