Warning using assignInlineVars in RSC (Next.js)

[atabel]

Describe the bug

When using assignInlineVars function:

<div className={styles.example} style={assignInlineVars({[styles.vars.backgroundColor]: color})}>Example</div>

React warns you about not being able to pass non plain objects between Server and Client components.

The problem is the object created by assignInlineVars has a .toString() method

Reproduction

https://github.com/atabel/next-vanilla-extract

System Info

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 25.68 GB / 31.28 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.18.2 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.npm-packages/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
    bun: 1.0.1 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 81.1.7.98
    Chrome: 119.0.6045.159
  npmPackages:
    @vanilla-extract/css: ^1.14.0 => 1.14.0 
    @vanilla-extract/dynamic: ^2.1.0 => 2.1.0 
    @vanilla-extract/next-plugin: ^2.3.2 => 2.3.2

Used Package Manager

yarn

Logs

$ next dev
   ▲ Next.js 14.0.3
   - Local:        http://localhost:3000

 ✓ Ready in 2.5s
 ○ Compiling / ...
 ✓ Compiled / in 2.3s (484 modules)
Warning: Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  <div className=... style={{--backgroundColor__1x1n9v70: "blue"}} children=...>
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 1864ms (476 modules)

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[selena-groh]

Just bumping this and adding another example. Running following code in Next.js 14 produces a React 418 error

<div style={assignInlineVars({[styles.blockContainerTextAlign]: children.length === 1 ? 'center' : ''})}>

However, updating it to the following fixes it. It seems that the empty string '' is the problem, and adding unset fixes it

<div style={assignInlineVars({[styles.blockContainerTextAlign]: children.length === 1 ? 'center' : 'unset'})}>

[hamidrezahanafi]

This can be fixed by using method below
style={JSON.parse(JSON.stringify(assignInlineVars(inlineVars)))}

[yoohahn]

Any news about this?

As a solution for now we just spread the result from assignInlineVars;

<div style={{...assignInlineVars({[myVar]: 'myStyle'})}} />

It works, but would be nice to not have to spread it here and create a new object for this.

[hamidrezahanafi]

Any news about this?

As a solution for now we just spread the result from assignInlineVars;

<div style={{...assignInlineVars({[myVar]: 'myStyle'})}} />

It works, but would be nice to not have to spread it here and create a new object for this.

I patched my @vanilla-extract/dynamic package and removed following code

  Object.defineProperty(styles, 'toString', {
    value: function value() {
      return Object.keys(this).map(key => "".concat(key, ":").concat(this[key])).join(';');
    },
    writable: false
  });

from:
dist/vanilla-extract-dynamic.cjs.dev.js
dist/vanilla-extract-dynamic.cjs.prod.js
dist/vanilla-extract-dynamic.esm.js

And it works like a charm now since I am using typescript and not converting assignInlineVars to string ever.