Error: Cannot access .Symbol(Symbol.toPrimitive) on the server

[EtienneMiret]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Tue Sep 13 07:51:46 UTC 2022
    Binaries:
      Node: 20.2.0
      npm: 9.6.6
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.5-canary.7
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://github.com/EtienneMiret/next-symbol-to-primitive-mcve

To Reproduce

This issue can be easily reproduce by cloning the reproduction repository and running:

npm run build

I order to reproduce it, I needed to:

• import a constant string in a server component from a client component,
• call a function on it.

Merely importing that string and using it as is do not cause any issue. Calling that function on a string defined in the server component do not cause any issue either.

Describe the Bug

At build time, I get the bellow error:

Error: Cannot access .Symbol(Symbol.toPrimitive) on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
    at Object.get (.next/server/chunks/89.js:4475:15)
    at fullTitle (.next/server/app/page.js:328:30)
    at 4182 (.next/server/app/page.js:336:12)
    at Function.__webpack_require__ (.next/server/webpack-runtime.js:25:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async collectGenerateParams (node_modules/next/dist/build/utils.js:822:17)

> Build error occurred
Error: Failed to collect page data for /
    at node_modules/next/dist/build/utils.js:1155:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

Looking at the offending file (.next/server/chunks/89.js:4475:15 in the above message), I see the error was thrown from module-proxy.ts:49. From the message, I know that String(name) was "Symbol(Symbol.toPrimitive)". Obviously, name could be any JS object returning this value in its .toString() function, but the string "Symbol(Symbol.toPrimitive)" and the symbol Symbol.toPrimitive are two likely culprits. And since the former case was tested above, line 36, I bet the name variable contained the Symbol itself rather than its string representation when the bug occurred.

A comment at the top of this file says it was copied from React. Interestingly, on main branch, the file there searches for the Symbol itself, not its string representation. See: ReactFlightWebpackNodeRegister.js:61.

I have no idea whether that variable is supposed to contain a string, or may also hold symbols.

Expected Behavior

I expect that build not to fail. Although my code might be doing something that isn’t supported.

Which browser are you using? (if relevant)

N/A: crashes at build time

How are you deploying your application? (if relevant)

N/A: crashes at build time

[EtienneMiret]

NB: 13.4.5-canary.8 was released while I was writing this bug report, but don’t fix this issue.

[Tam]

I'm also getting this error, but only when using 'use client';.

Error: Cannot access .Symbol(Symbol.toPrimitive) on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

  1 | export default function gql (query, ...values) {
> 2 | 	query = query.reduce((a, b, i) => a + b + (values[i] || ''), '')
    | 	                                     ^
  3 | 		.replace(/[\r\n]/g, ' ')
  4 | 		.replace(/\s+/g, ' ');
  5 | 

{
    "next": "13.4.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
}