Compilation Issue with Adobe Spectrum / React Aria

[br0wsa]

Provide a general summary of the issue here

Background

I would like to bring attention to a bug that was previously reported in 2023 regarding the compilation issues when using Adobe Spectrum or React Aria with Vike.

Issue Description

The bug seems to affect the ability to use Vike in both Server-Side Rendering (SSR) and pre-rendering scenarios when integrating with Adobe Spectrum or React Aria.

Questions

• Has this bug been fixed? If so, could you provide details on the resolution?
• Is it currently possible to use Vike effectively in SSR and pre-rendering modes with Adobe Spectrum or React Aria?

Additional Information

If there are any workarounds or updates regarding this issue, I would appreciate any guidance or documentation that could help clarify the current status.

Thank you for your attention to this matter!

VIKE

🤔 Expected Behavior?

Processing the css that is imported by @adobe/react-spectrum

😯 Current Behavior

It seems like vite is not processing the css that is imported by @adobe/react-spectrum and it's getting passed to node which then, understandably, cant process it.

Is there something I am missing in the configuration to get this to work? With next.js, @adobe/react-spectrum recommends transpiling the library in next.config.js . Does vite-plugin-ssr need something similar? From reading the docs I got the impression that it should handle css like this automatically.

💁 Possible Solution

Ref Vike

🔦 Context

No response

🖥️ Steps to Reproduce

import React from 'react'
import { Counter } from './Counter'
import { Heading, SSRProvider } from "@adobe/react-spectrum"

export { Page }

function Page() {
  return (
    <>
      <SSRProvider>
        <Heading> This is a heading</Heading>
        <h1>Welcome</h1>
        This page is:
        <ul>
          <li>Rendered to HTML.</li>
          <li>
            Interactive. <Counter />
          </li>
        </ul>
      </SSRProvider>
    </>
  )
}

Version

Ubuntu

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Ubuntu 24

🧢 Your Company/Team

Bluecornflakes

🕷 Tracking Issue

No response

[snowystinger]

Sounds like a Vite configuration thing. Maybe something like https://github.com/hi-ogawa/vite-plugins/tree/main/packages/ssr-css should be used? What have you tried or what have you found in searching the web? Did any of it change the error message you saw.

Sounds like the conversation should be continued here vikejs/vike#791 as I don't see a resolution there, but maybe someone just forgot to post their findings.

It'd be helpful if the error was included in the report as well as a stackblitz or something to reproduce the issue.
Thank you!

[brillout]

This issue is likely to happen with every Vite-based framework.

By default, Vite doesn't transpile the server-side code of npm packages for a much faster DX, so that Node.js directly executes the server-side code without involving a slow transpilation process.

Quoting https://vike.dev/broken-npm-package#why.

Once Vite starts using Rolldown instead of Rollup, Vite may (I guess) change its default behavior which would solve this issue.

In the meantime, I'd recommend library authors to remove CSS imports from their server-side builds. (I understand this can conflict with Next.js's server-first vision.)

For Vite-based framework users a workaround they can use today is described at https://vike.dev/broken-npm-package#err-unknown-file-extension.