Cannot build vite project using clarity core v6

[wghglory]

Describe the bug

I'm using Vite Vue and React both. After installing @cds/core @cds/react v6.0.0 and importing a clarity button component for example, the vite project build always raises the below error. Only when I downgrade clarity to 5.6.4, the below issue disappear.

[vite]: Rollup failed to resolve import "@cds/core/icon/shapes/exclamation-circle.js" from "node_modules/@cds/core/forms/register.js". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external error during build:

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [ ] Angular
• [x] React
• [x] Vue
• [ ] Other:

Framework version:

Vite

[bbogdanov]

Just curious - are you using micro front-end architecture?

[wghglory]

Not in this bug report. Just Vite + react/vue

[ashleyryan]

Can you create a repo with a reproduction? That would save us a lot of time

[wghglory]

Yes, you can use this branch "issue/clarity" https://github.com/wghglory/vmware-vite-react-seed/tree/issue/clarity. In this branch, clarity version is 6.0.1. npm run build will see the build error. Only when downgrading to 5.6.4, the error disappears.

[ashleyryan]

I'm not able to reproduce the issue using vite+react+core in stackblitz (using the official vite+react stackblitz starter).
https://stackblitz.com/edit/vitejs-vite-xcjfsz?file=package.json,src%2FApp.jsx,package-lock.json&terminal=dev

Your repo is also way too big and has way too many dependencies for me to debug this. I can look further if you can product a minimum-repro case, without all of the other dependencies (tailwind, etc).

[wghglory]

I downloaded your stackbitz repo and npm run build, which reproduced the issue. Did you try to build?

[ashleyryan]

Ah sorry, I was only running npm run dev

Ok, I figured it out. You need to add the @rollup/plugin-node-resolve package to your vite config: https://stackblitz.com/edit/vitejs-vite-xcjfsz?file=package.json,vite.config.js&terminal=build

[wghglory]

Thanks, @ashleyryan! But I wonder why v.5.6.4 doesn't need this package? What changes does clarity make in v6 to make this plugin necessary?

[ashleyryan]

There are a lot of changes in v6 and a lot of internal refactoring - most of those changes were made before my time. I can't say for sure, but as the error message indicates, that file (and similar ones) uses an import from the package instead of a relative file import. That may be new in v6

[wghglory]

In v5.6.4, there's no need for @rollup/plugin-node-resolve to make a successful build. And I checked the file used an import from the package just like v6. So that's why I wonder what underneath causes the failure. I just didn't figure out the differences, and why the same format outputs the different results.

[wghglory]

In v5.7.2, the build error can be reproduced.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.