How to use remix v2.0 with @radix-ui/themes?

[gavinliu6]

I use remix v2.0 with @radix-ui/themes, but got the following problem when pnpm dev:

import { Theme } from "@radix-ui/themes";
         ^^^^^
SyntaxError: Named export 'Theme' not found. The requested module '@radix-ui/themes' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@radix-ui/themes';
const { Theme } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Then I found this: https://remix.run/docs/en/main/start/v2#esm--commonjs-errors. But I think it's inapplicable, because @radix-ui/themes supports cjs and esm.

So well, is this a bug or am I using it incorrectly？

[kishanhitk]

I just tried reproducing this on my remix v2, and it is working fine for me.
If possible, can you please share a minimal repo where I can reproduce this issue?

[gavinliu6]

Sample in CodeSandbox: https://codesandbox.io/p/sandbox/nervous-james-j72x3r

[kishanhitk]

Adding serverDependenciesToBundle: ["@radix-ui/themes"] to remix.config.js fixed the issue for now.
But there has to be a better way to solve this. Ideally, it should work without any extra config.

[kupras06]

@kishanhitk I updated my remix config, but it didn't fix the issue entirely. I am facing another issue.

This requires @radix-ui/react-slot which is something radix-ui uses internally.
Fixing that results into something else missing.
Is there any way to make it run by default?

[gavinliu6]

I continued to add the package that was causing the error to serverDependenciesToBundle until no errors appeared. But I personally don't think this is a proper approach to solving the problem.

[fernandocanizo]

I tried the same approach but got into an infinite loop, I reach a point where:

Error: Cannot find package '@babel/runtime' imported from ./build/index.js
Did you mean to import @[email protected]/node_modules/@babel/runtime/helpers/esm/extends.js?

And adding:

  serverDependenciesToBundle: [
    "@radix-ui/themes",
    "classnames",
    "@radix-ui/react-tooltip",
    "@babel/runtime",

Doesn't solve it. It keeps appearing the @babel/runtime requirement unmet.

@quangv solution also doesn't work for me.

[matiasleidemer]

This is how I got this working:

• Set "type": "commonjs" in package.json;
• Add the serverModuleFormat: 'cjs' configuration to remix.config.js and replace the export default with module.exports:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverModuleFormat: 'cjs',
  // etc
}

You might need to update other server files to use commonjs exports.

EDIT: If that's giving you a hard time, try using shadcn instead; it's really great.

[fernandocanizo]

Changing the whole setup of a project is not a solution, not even a nice workaround.

[quangv]

import { Theme, Container } from "../../node_modules/@radix-ui/themes/dist/esm";

To continue to use serverModuleFormat: 'esm', This seems to work, but doesn't feel right.

[ryaninvents]

I attempted the "type": "commonjs" fix, but I'm in a monorepo that uses ESM everywhere else, and with my Remix app as CommonJS, I can't load any of the other packages. I've also tested modifying the @radix-ui/themes package.json with pnpm patch, but haven't found a combination that works.

[ryaninvents]

I've created a minimal repro repo in case anyone wants to experiment.

Also, found a couple related items:

• From the docs: Importing ESM packages
• Similar issues:
  • Radix (1)
  • history (1)
  • Reactflow (1, 2)

[ryaninvents]

I managed to fix it for my project! If you're using pnpm, you can use pnpm patch to strip all ESM information out of package.json. This will force it to use the more-compatible CommonJS version of the code. If you're using Yarn, there's a similar yarn patch command. Here's the proof-of-concept solution.