Repository: next.js
Issue: Can't filter server-side based on client export
Labels: bug,Internationalization (i18n),Module Resolution

### 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
```jsx
"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

```bash
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: https://github.com/vercel/next.js/discussions/49322
- Similar issue in the context of 3rd party components and hooks: https://github.com/apollographql/apollo-client/issues/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.