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.

[kulkarnisaumitra98]

@dai-shi I think the root cause of issue is the configFile: false attribute. We are passing it because we resolve the vite config by calling the resolveConfig function, which causes unexpeceted issues. If I am not wrong we don't need to call it as it is internally called by the createViteServer anyways.

Since we pass configFile as false, the vanillaExtract plugin honours that attribute and passes waku vite server's inlineConfig to it's own viteServer instance, which causes all of the waku specific plugins to run. And in the rscHmrPlugin where we create html, the vite server instance gets changed, which ultimately fails the generation of css.

I have added the possible solution here, please have a look.

[dai-shi]

Thanks for looking into it.
For the suggestion, I think we need to ask @Aslemammad for some insights.

[Aslemammad]

If I am not wrong we don't need to call it as it is internally called by the createViteServer anyways.

if that's true, we can remove the mergeConfig! but that need to be verified so we do not lose the support of vite configs.

[dai-shi]

the vanillaExtract plugin honours that attribute and passes waku vite server's inlineConfig

That's a very unexpected usage of the attribute, but can't blame. Let's hope #1036 works.