Using chimera-ui in RemixJS

[jeepers3327]

Hi, Thanks for this awesome project.

How do I make chimera-ui work with RemixJS? I followed the steps in the doc and but wasn't able to make it to work. Error encountered when using a button component

The path "@chimera-ui/components" is imported in app/root.tsx but "@chimera-ui/components" was not found in your node_modules. Did you forget to install it?

✘ [ERROR] Could not resolve "@chimera-ui/components"

    app/root.tsx:14:23:
      14 │ import { Button } from "@chimera-ui/components";
         ╵                        ~~~~~~~~~~~~~~~~~~~~~~~~

  Importing the directory "./dist" is forbidden by this package:

    node_modules/@chimera-ui/components/package.json:11:9:
      11 │     ".": "./dist",
         ╵          ~~~~~~~~

  The presence of "exports" here makes importing a directory forbidden:

    node_modules/@chimera-ui/components/package.json:10:2:
      10 │   "exports": {
         ╵   ~~~~~~~~~

  You can mark the path "@chimera-ui/components" as external to exclude it from the bundle, which will remove this error.

I tried using it with NextJS and it works.

[williamlmao]

Hey @jeepers3327, thanks for trying it out! I haven't tried it with remix yet. Can you link your repo? I'll take a look later today.

[jeepers3327]

Thanks for the quick response. Here's the minimal reproducible repo: https://github.com/jeepers3327/demo-chimera.

[williamlmao]

Hey @jeepers3327, sorry this took a while as I am not super experienced with remix, but I managed to get it working!

First when running npm run build

remix-app:build:     app/routes/index.tsx:1:48:
remix-app:build:       1 │ ... { Button, Input, Progress, Switch } from "@chimera-ui/components";
remix-app:build:         ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~~
remix-app:build: 
remix-app:build:   Importing the directory "./dist" is forbidden by this package:
remix-app:build: 
remix-app:build:     node_modules/@chimera-ui/components/package.json:11:9:
remix-app:build:       11 │     ".": "./dist",
remix-app:build:          ╵          ~~~~~~~~
remix-app:build: 
remix-app:build:   The presence of "exports" here makes importing a directory forbidden:
remix-app:build: 
remix-app:build:     node_modules/@chimera-ui/components/package.json:10:2:
remix-app:build:       10 │   "exports": {
remix-app:build:          ╵   ~~~~~~~~~

So I removed the exports from package json (they weren't really doing anything anyways), but ran into an ESM module error.

https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages

This documentation got me around that. Looks like you need to add serverDependenciesToBundle.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  future: {
    unstable_tailwind: true,
  },
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: ["@chimera-ui/components"],
};

However, there was also an issue with importing your css. I moved your css from /styles to /app, like the tailwind docs show: https://tailwindcss.com/docs/guides/remix

Then, it all worked!

In summary what you need to do is:

1. npm install @chimera-ui/components@latest
2. Update your remix.config.js with serverDependenciesToBundle: ["@chimera-ui/components"]
3. Import your css files correctly

Thanks for flagging this issue with Remix. I will add it to the chimera docs.