使用node-postgres插入PostgreSQL数据时出现Illegal return语句错误

使用node-postgres操作PostgreSQL数据库时，查询数据可正常执行，但执行插入语句时触发语法错误。

相关代码 #

client.ts #

import { Client } from 'pg'

const client = new Client({
  connectionString: "MY_DATABASE_URL",
  ssl: {
    rejectUnauthorized: false,
  },
});

export default client

提交处理函数 #

const submit = async (e: { preventDefault: () => void }) => {
    e.preventDefault()
  
    const query = `
      INSERT INTO mesin
          (nama_mesin, nomer_mesin, kategori, status_mesin)
      VALUES
          ('test2', 'test2', 'test2', 'test2')
    `

    try {
      const res = await client.query(query)
      console.log(res.rows[0])
    
    } catch (err: any) {
      console.log(err.stack)
    }
}

报错信息 #

- error SyntaxError: Illegal return statement
    at __webpack_require__ (user\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (user\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (user\.next\server\webpack-runtime.js:33:43)
    at __webpack_require__ (user\.next\server\webpack-runtime.js:33:43)
    at eval (./db/client.ts:5:60)
    at Module.(sc_client)/./db/client.ts (user\.next\server\app\mesin\page.js:663:1)
    at __webpack_require__ (user\.next\server\webpack-runtime.js:33:43)
    at eval (./app/mesin/page.tsx:16:68)
    at Module.(sc_client)/./app/mesin/page.tsx (user\.next\server\webpack-runtime.js:33:43)

解决方案 #

这个错误并非SQL语句问题，而是Next.js环境下代码运行环境不匹配导致：pg（node-postgres）是服务器端依赖，无法在浏览器客户端环境中运行。如果submit函数所在组件是客户端组件（添加了'use client'指令），直接导入并调用client.query会导致webpack打包时解析服务器端库代码失败，抛出语法错误。

修复步骤 #

方法1：使用Server Actions（推荐）

将数据库操作封装为Server Action，在服务器端执行：

1. 创建Server Action（可单独放在actions.ts或组件文件中）：

'use server'

import client from '@/db/client'

export async function addMesin() {
  const query = `
    INSERT INTO mesin
        (nama_mesin, nomer_mesin, kategori, status_mesin)
    VALUES
        ('test2', 'test2', 'test2', 'test2')
  `
  try {
    const res = await client.query(query)
    return res
  } catch (err) {
    console.error(err)
    throw err
  }
}

2. 在客户端组件中调用该Action：

'use client'

import { addMesin } from './actions'

const submit = async (e: { preventDefault: () => void }) => {
  e.preventDefault()
  try {
    await addMesin()
    console.log('插入成功')
  } catch (err) {
    console.error(err)
  }
}

方法2：使用API路由

创建API路由处理插入请求，客户端通过fetch调用：

1. 创建app/api/mesin/route.ts：

import client from '@/db/client'
import { NextResponse } from 'next/server'

export async function POST() {
  const query = `
    INSERT INTO mesin
        (nama_mesin, nomer_mesin, kategori, status_mesin)
    VALUES
        ('test2', 'test2', 'test2', 'test2')
  `
  try {
    await client.query(query)
    return NextResponse.json({ success: true })
  } catch (err) {
    console.error(err)
    return NextResponse.json({ success: false, error: '插入失败' }, { status: 500 })
  }
}

2. 在客户端组件的submit函数中调用API：

'use client'

const submit = async (e: { preventDefault: () => void }) => {
  e.preventDefault()
  try {
    const res = await fetch('/api/mesin', { method: 'POST' })
    const data = await res.json()
    data.success ? console.log('插入成功') : console.error('插入失败')
  } catch (err) {
    console.error(err)
  }
}

注意：确保client.ts仅在服务器端代码中被导入，避免在客户端组件中直接引用。

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