Unable to start remix v2 w/ react-spectrum

[bwswedberg]

Provide a general summary of the issue here

I'm unable to start Remix v2 w/ React Spectrum (@adobe/react-spectrum). I've tried many enumerations of the steps in the docs on remix ssr, but it's not clear to me how to get up and running w/ remix.

I've added react-spectrum regexps to serverDependenciesToBundle which gets me past a CSS issue. However, I'm getting hung up on the below error which prevents remix from starting up.

file:///workspaces/workspace/node_modules/@adobe/react-spectrum-ui/dist/CornerTriangle.js:17
var _react = _interopRequireDefault(require("react"));
                                    ^
Error: Dynamic require of "react" is not supported
    at file:///workspaces/workspace/build/index.js?t=1705772128979.76:11:9
    at node_modules/@adobe/react-spectrum-ui/dist/CornerTriangle.js (file:///workspaces/workspace/node_modules/@adobe/react-spectrum-ui/dist/CornerTriangle.js:17:37)
    at file:///workspaces/workspace/build/index.js?t=1705772128979.76:14:50
    at file:///workspaces/workspace/node_modules/@spectrum-icons/ui/CornerTriangle.module.mjs:1:49
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at run (/workspaces/workspace/node_modules/@remix-run/serve/dist/cli.js:113:15)

Here is a codesandbox w/ remix and react-spectrum.

Unsure if this helps, but I'm able to use the remix v2 w/ react-aria-components just fine.

🤔 Expected Behavior?

To be able to start remix v2 w/ react-spectrum.

I would also really appreciate example repos that use remix latest or perhaps a remix template.

😯 Current Behavior

Remix v2 won't start w/ an error coming from react-spectrum.

💁 Possible Solution

Unsure

🔦 Context

I am unable to use react-spectrum with the latest version of remix.

🖥️ Steps to Reproduce

See codesandbox

Version

3.33.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac and codesandbox

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[richardbann]

Hi, I was lookin into this, it seems to be too many variables in the equation (at least for me). I think the Remix team could give you explanation on what is going wrong here. Probably you should try Vite mode (https://remix.run/docs/en/main/future/vite). Anyway, I could make it work but not sure if it is an acceptable solution. What I did is switching the compiler to cjs:

• Add this config to remix conf: serverModuleFormat: "cjs",
• Remove "type": "module", from package.json
• Rename remix.config.js to remix.config.mjs

This worked for me, at least with node v20.11.0.

Hope this helps.