[Turbo] - The "use server" directive must be at the top of the file.

[The-Code-Monkey]

Summary

Hey, i was trying out turbo on a repo for work, which runs fine normally, when moving over to turbo i get this error on dev

Build Error
Failed to compile

Next.js (14.3.0-canary.15) (turbo)
./src/components/SearchBox/functions.ts:1:1
Ecmascript file had an error

1 | "use server";
| ^^^^^^^^^^^^
2 |
3 | import useQuery from "@/hooks/useQuery";
4 | import { type Listing, type SearchPagination } from "@/utils/types";

The "use server" directive must be at the top of the file.

Additional information

"use server";

import useQuery from "@/hooks/useQuery";
import { type Listing, type SearchPagination } from "@/utils/types";

import { GET_LISTINGS } from "../../app/graphql";

export const getSearchSuggestions = async (query: string) => {
  const { data } = await useQuery<SearchPagination<"listings_search", Listing>>(
    GET_LISTINGS,
    {
      variables: {
        filter: {
          status: "publish",
        },

        search: {
          text: {
            query,
          },
        },
      },
    },
  );

  return { data };
};


This is the code that is erroring, this function is imported into a client search component.

Any reason why this is failing?

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:45:49 PST 2024; root:xnu-10063.101.15~2/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 3.6.1
  pnpm: 8.6.12
Relevant Packages:
  next: 14.3.0-canary.15 // Latest available version is detected (14.3.0-canary.15).
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

Example

No response

[kyrregjerstad]

I'm having the same issue, did you find any workaround for this?

[polaris0211]

My code makes same issue

[Dxuian]

this issue is still persisting [email protected] any workaround or permanent fixes ?
ill be raising this discussion to issue as i havent found a fix

[Antonytm]

Same for me.

[harisiqbal12]

Same issue with my project as well.

[Youssef-Hassane]

+1 🤡🤡

[NikkingUA]

I think If useQuery have "use client"??

[slimbde]

Server components are not allowed to use any hooks. Get rid of useQuery and it would do.

[MiroslavPetrik]

This could be it.
I had one function useTranslation which was named like a hook, but used in server components and server action.
After renaming the "hook" to just translate it got rid of the error:

MiroslavPetrik/net3-starter@d36c1f5#r149933209

[mikemasam]

@MiroslavPetrik same, it seem the useHook naming causes this