Can't filter server-side based on client export

[eric-burel]

Link to the code that reproduces this issue

https://github.com/eric-burel/client-array-next-repro

To Reproduce

1. npm install && npm run dev
2. Open app

Current vs. Expected behavior

Current

Will trigger error Error: Attempted to call includes() from the server but includes is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

I've also tried serializing the object, doesn't work.

Code sample

"use client"
// Can't be imported from a server component safely
export const i18nTokens = ["foobar"]
// Doesn't work either, in a RSC the value is an empty object
export const i18nTokensStr = JSON.stringify(["foobar"])

export function ClientComponent({ translations }: { translations: Array<[string, string]> }) {
    return <span>Show translated content for key "foo": {translations.find(([k, v]) => k === "foo")?.[1]}</span>
}

Expected

Filter tokens passed to the server.

This issue could be bypassed by exporting tokens from a separate ".tokens.js" file, imported from server and client components.
This makes development a bit more cumbersome though, in an already cumbersome system.

Since turbopack doesn't have plugins yet, automated extraction of i18n tokens is slightly more delicate, hence the choice of an explicit export.

I suspect the idea is to avoid mistakes from end user mutating array client-side and thinking the server value will update? If yes, this pattern should at least work with frozen objects.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #35~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Tue May  7 09:00:52 UTC 2
  Available memory (MB): 27895
  Available CPU cores: 6
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 4.0.2
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.0-canary.14 // Latest available version is detected (15.0.0-canary.14).
  eslint-config-next: N/A
  react: 19.0.0-rc-6f23540c7d-20240528
  react-dom: 19.0.0-rc-6f23540c7d-20240528
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Internationalization (i18n), Module Resolution

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I am crafting an i18n system that allows filtering tokens during the data fetching step, so only relevant translation tokens hit the client. Full work is in the process of being published: https://www.ericburel.tech/blog/hybrid-i18n-next-astro-1

Related:

• Similar issue: How to import functions from modules that contain React hooks import in RSC files? #49322
• Similar issue in the context of 3rd party components and hooks: nextjs release breaks server component use of Apollo query latest release apollographql/apollo-client#10974
• Similar Stack Overflow question: https://stackoverflow.com/questions/78145012/nextjs-attempted-to-call-find-from-the-server-but-find-is-on-the-client

If this is issue is already documented somehow, adding a link in the error message would help, as googling the error message didn't help much.