Next.js+TypeScript项目运行register.tsx时出现模块导入语法错误

遇到的错误信息：

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

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

相关的register.tsx代码：

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

export default function Register() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async (e: { preventDefault: () => void; }) => {
    e.preventDefault();

    try {
      const response = await axios.post('/api/register', { email, password });
      console.log(response.data); // 注册成功，按需处理响应
    } catch (error) {
      console.log(error.response.data); // 注册失败，按需处理错误
    }
  };

  return (
    <div>
      <h1>Register</h1>
      <form onSubmit={handleRegister}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">Register</button>
      </form>
    </div>
  );
}

排查与解决方向： #

• 不要直接用node命令执行该文件：Next.js页面组件必须通过项目启动命令（npm run dev）运行，之后在浏览器访问对应路由（比如/register），不能单独用node register.tsx执行。
• 检查文件位置：确保register.tsx放在Next.js的pages目录下（Pages Router）或者app/register目录下（App Router），这样Next.js才会自动编译处理TypeScript和JSX语法。
• 验证tsconfig.json配置：确保compilerOptions中的module设置为ESNext或NodeNext，target设置为ES6及以上，保证TypeScript编译输出符合模块规范。
• 确认文件扩展名：确保文件名是.tsx而不是.ts或.js，.tsx是Next.js识别JSX+TypeScript的正确扩展名。

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