Issues getting @adobe/react-spectrum to work

[stuartlynn]

Hey all. First of all, I want to say that after bashing my head against the inflexibility of next.js for about a year I am super excited about the more un-opinonated approach that vite-plugin-ssr is taking. It's really refreshing.

I am having an issue porting a project from next.js to vite-plugin-ssr which extensively uses @adobe/react-spectrum for the UI. I am struggling to get even a simple @adobe/react-spectrum project to work. Using the vite-plugin-ssr boiler plate I put together this super simple example which simple sets up the spectrum SSR provider and tries to render a basic component

index.page.tsx

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>
    </>
  )
}

When I try to load the home page though, it gives me the following error:

Error: ERR_UNKNOWN_FILE_EXTENSION .css /home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@react-spectrum/actiongroup/dist/main.css
    at defaultGetFormat (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/dist-raw/node-internal-modules-esm-get_format.js:93:15)
    at defer (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:296:7)
    at entrypointFallback (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:304:22)
    at getFormat (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:338:26)
    at /home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:245:17
    at addShortCircuitFlag (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:409:21)
    at load (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/esm.ts:239:12)
    at load (/home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/ts-node/src/child/child-loader.ts:18:36)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)

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.

Any help appreciated and example repo with the issue can be found here : https://github.com/stuartlynn/vite-ssr-spectrum-bug/tree/main

[brillout]

Have you tried the solution mentioned at https://vite-plugin-ssr.com/common-issues#libraries-containing-invalid-esm? The workaround also works for libraries containing CSS imports.

[stuartlynn]

Ack sorry I didn't realize that also applied to css imports. That seems to have resolved the css error but now it's complaining about importing one of the sub dependencies which appears to be an mjs module.

Will fiddle around with the config some more and see if I can't get that to resolve too.

Thanks for the fast response

5:22:04 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@adobe/react-spectrum-ui/dist/CornerTriangle.js:

5:22:04 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@spectrum-icons/ui/CornerTriangle.module.mjs:

5:22:04 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@react-spectrum/button/dist/import.mjs:

5:22:04 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@react-spectrum/actiongroup/dist/import.mjs:

5:22:04 PM [vite] Error when evaluating SSR module /node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@adobe/react-spectrum/dist/import.mjs:

5:22:04 PM [vite] Error when evaluating SSR module /pages/index/index.page.tsx:

ReferenceError: exports is not defined
    at /node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@adobe/react-spectrum-ui/dist/CornerTriangle.js:12:23
    at instantiateModule (file:///home/stuart/tmp/vite-ssr-example/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:15)

[brillout]

Indeed I could reproduce. The transpilation is done by Vite, so the best would be to create a Vite issue with that reproduction.

(FYI Vite should be able to process CJS code just fine, even when imported from a .mjs file.)

I'd also create a ticket over at Adobe. They'll likely want to know about this as well.

[brillout]

Keep me updated when(/if) you create the issues. Looking forward to help getting the issues resolved.

[stuartlynn]

Will do. Should hopefully submit something tomorrow. One quick thing though, it looks like there is no problem using spectrum from regular vite, I put together a quick example here https://stackblitz.com/edit/vitejs-vite-eaawhl?file=package.json which seems to work without the errors we are getting from vite-plugin-ssr. That would seem to imply that the vite transpiling works fine in the browser context but not the SSR context. I feel like this mean that it might be an issue how tsconfig or vite.config are set up.

Will link the tickets back here once I submit them

[brillout]

When using Vite without vite-plugin-ssr, Vite transpiles React Spectrum only for the browser-side.

When using vite-plugin-ssr, Vite transpiles React Spectrum as well for the server-side. That's why you only get the error when using vite-plugin-ssr.

The error is that Vite isn't able to process React Spectrum for the server-side. Vite-plugin-ssr doesn't do any transpilation, it's all done by Vite.

Will link the tickets back here once I submit them

👍 Looking forward to it.

(Btw. in case your company is up for it: https://github.com/sponsors/brillout in which case I'll dig into the problem myself and do a PR accordingly.)