Bug: [DEV only] waku app with vanilla-extract

[ojj1123]

Background

I was migrating waku app into [email protected] with vanilla-extract. I encountered this error:

> waku dev

ready: Listening on http://localhost:3000/
Cannot process SSR ReferenceError: __vanilla_globalCssAdapter__ is not defined
    at eval (/Users/jeongjin/GitHub/waku-vanilla/src/components/styles.css.ts:7:34)
    at async instantiateModule (file:///Users/jeongjin/GitHub/waku-vanilla/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5) {
  plugin: 'rsc-delegate-plugin',
  id: '/Users/jeongjin/GitHub/waku-vanilla/src/pages/index.tsx',
  pluginCode: 'import { jsxDEV } from "react/jsx-dev-runtime";\n' +
    'import { Link } from "waku";\n' +
    'import { Counter } from "../components/counter";\n' +
    'import { container } from "../components/styles.css";\n' +
    'export default async function HomePage() {\n' +
    '  const data = await getData();\n' +
    '  return /* @__PURE__ */ jsxDEV("div", { className: container, children: [\n' +
...
}
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

ReferenceError: __vanilla_globalCssAdapter__ is not defined
    at eval (/Users/jeongjin/GitHub/waku-vanilla/src/components/styles.css.ts:7:34)
    at async instantiateModule (file:///Users/jeongjin/GitHub/waku-vanilla/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5) {
  plugin: 'rsc-delegate-plugin',
  id: '/Users/jeongjin/GitHub/waku-vanilla/src/pages/index.tsx',
  pluginCode: 'import { jsxDEV } from "react/jsx-dev-runtime";\n' +
    'import { Link } from "waku";\n' +
    'import { Counter } from "../components/counter";\n' +
    'import { container } from "../components/styles.css";\n' +
    'export default async function HomePage() {\n' +
    '  const data = await getData();\n' +
    '  return /* @__PURE__ */ jsxDEV("div", { className: container, children: [\n' +
...
}

How to reproduce

This is reproduction of this issue.
https://github.com/ojj1123/repro-waku-vanilla-extract

1. pnpm install
2. pnpm dev
3. open http://localhost:3000/
4. you can see this and check out your console error:

Additional Contexts

• This issue is only on Dev mode(pnpm dev). I tried to do pnpm build and pnpm start, but there were no issues.
• I've investigated for this issue
  • __vanilla_globalCssAdapter__ you can see is used @vanilla-extract/vite-plugin internally. Bug I don't know what it is. 😅

[dai-shi]

Is #750 somehow related?

[ojj1123]

My issue also work well when using client component.

[ojj1123]

It could be upstream issue.

Btw, What is rsc-delegate-plugin?

[dai-shi]

I think you've asked it before, but anyway, it's a way to bridge our two vite servers for delegating hot reloads.

[ojj1123]

I'm investigating to resolve this issue, but I'm gonna take some time 😅
I guess waku doesn't deal with outputs of @vanilla-extract/vite-plugin properly. And I found something:

-import { container } from "../components/styles.css"
+import { container } from "../components/styles.css.js"

When I did like this, It has no error but there are no styles at all(including tailwindcss). It means no css is being injected to html on dev mode.