Community forum for knowledge and support

Updated 3 weeks ago

Exporting Components from Relume UI Library for NextJS Application

Hi there! first of all I'm really impressed with Relume! I'm loving it so far so I decided to included in my next weekend project but I got some issues down the road, I'm going to try and explain some of them here... I'm trying to export my site components so I'm able to use them in my NextJS application and I'm getting this error:

Error: ./src/components/home/components/Cta39.jsx:3:1
Export Card doesn't exist in target module

The export Card was not found in module [project]/node_modules/@relume_io/relume-ui/dist/index.mjs [app-client] (ecmascript).
Did you mean to import Carousel?
All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.
    at BuildError (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/%5Broot-of-the-server%5D__16ba2972._.js:17359:41">http://localhost:8080/_next/static/chunks/%5Broot-of-the-server%5D__16ba2972._.js:17359:41</a>)
    at react-stack-bottom-frame (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:13596:24">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:13596:24</a>)
    at renderWithHooks (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:3560:24">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:3560:24</a>)
    at updateFunctionComponent (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:5317:21">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:5317:21</a>)
    at beginWork (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:5916:24">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:5916:24</a>)
    at runWithFiberInDEV (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:1335:74">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:1335:74</a>)
    at performUnitOfWork (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7988:97">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7988:97</a>)
    at workLoopSync (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7880:40">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7880:40</a>)
    at renderRootSync (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7863:13">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7863:13</a>)
    at performWorkOnRoot (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7602:212">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:7602:212</a>)
    at performWorkOnRootViaSchedulerTask (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:8566:9">http://localhost:8080/_next/static/chunks/node_modules_react-dom_82bb97c6._.js:8566:9</a>)
    at MessagePort.performWorkUntilDeadline (<a target="_blank" rel="noopener noreferrer" href="http://localhost:8080/_next/static/chunks/node_modules_a51498a5._.js:1119:64">http://localhost:8080/_next/static/chunks/node_modules_a51498a5._.js:1119:64</a>)
(Pls disregard the components/.../componets folder structure I need to fix that since the way you guys export the components is not the same I'm following un my project so each component I need to re-organize it to make compatible with my NextJS structure but that's ok I can live with that (a cool feature to include is support for other folder structures πŸ˜‰ ) Anyways back to the main problem this are my dependencies
"dependencies": {
    "@relume_io/relume-tailwind": "^1.3.0",
    "@relume_io/relume-ui": "^1.3.1",
    "next": "15.4.0-canary.51",
    "postcss": "^8.5.3",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "tailwindcss-animate": "^1.0.7"
  },
Like you can see I'm using latest version of react and it's a bit annoying to install relume_io because of this tiny problem:
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @relume_io/relume-ui@1.3.1
npm error Found: react@19.1.0
npm error node_modules/react
npm error   react@"19.1.0" from the root project
npm error   peer react@">=16.8.0" from @floating-ui/react-dom@2.1.2
npm error   node_modules/@floating-ui/react-dom
npm error     @floating-ui/react-dom@"^2.0.0" from @radix-ui/react-popper@1.2.7
npm error     node_modules/@radix-ui/react-popper
npm error       @radix-ui/react-popper@"1.2.7" from @radix-ui/react-menu@2.1.15
npm error       node_modules/@radix-ui/react-menu
npm error         @radix-ui/react-menu@"2.1.15" from @radix-ui/react-dropdown-menu@2.1.15
npm error         node_modules/@radix-ui/react-dropdown-menu
npm error       3 more (@radix-ui/react-popover, @radix-ui/react-select, @radix-ui/react-tooltip)
npm error   162 more (@radix-ui/react-accordion, ...)
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.2.0" from @relume_io/relume-ui@1.3.1
npm error node_modules/@relume_io/relume-ui
npm error   @relume_io/relume-ui@"^1.3.1" from the root project
npm error
npm error Conflicting peer dependency: react@18.3.1
npm error node_modules/react
npm error   peer react@"^18.2.0" from @relume_io/relume-ui@1.3.1
npm error   node_modules/@relume_io/relume-ui
npm error     @relume_io/relume-ui@"^1.3.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
So to avoid that problem I need to run npm install with the --legacy-peer-deps flag any chance we can update this or is there any other way of fixing this problem?
So to summarize I'm facing two issues:
  1. Export Card doesn't exist in target module
  2. Could not resolve dependency: peer react@"^18.2.0" from @relume_io/relume-ui@1.3.1 (possible because you guys need to update the library dependencies to support newest version of react). Although this is not a big deal because I can still run my project with the flag
Not sure if this is the correct channel to ask this questions but I would really love the support! Thanks in advance!

N
M
2 comments

Hey @Marlon A. Espinosa,

  • We're aware of such error and this is going to be fixed in the next release which is in the few coming weeks. You can just replace any Card component with a div wrapper having borders (for now)
  • Currently, there is no solution for such error other than running the flag, but we're fixing this in our next release as well!

OK sounds good I will wait for the next release thanks for the reply! Looking forward to it!

Add a reply
Sign up and join the conversation on Slack