Using CDS core without framework fails because of import problem

[Rebolon]

Describe the bug

I try to use Clarity Core in a simple HTML/Javascript application without any compiler. I follow the documentation from https://clarity.design/pages/developing and https://storybook.core.clarity.design/?path=/story/documentation-getting-started--page but when i run the application i have import errors in the console :

Uncaught TypeError: Failed to resolve module specifier "@cds/core/icon/register.js". Relative references must start with either "/", "./", or "../".

If i try cdn project in clarity/starters it works, because it doesn't import from node_modules, but from cdn.skypack.dev where the register.js has correct import path.

How to reproduce

Here is a stackblitz to reproduce : https://stackblitz.com/edit/stackblitz-starters-k3kbl2?file=index.html

Steps to reproduce the behavior:

1. Open the stackblitz and wait for initialization
2. The page is rendered

Expected behavior

The buttons "Button Hello World" should be rendered as a button. But it's rendered as a text. the browser console displays error from import js code.

Versions

Clarity project:

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

Clarity version:

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

Framework:

• [ ] Angular
• [ ] React
• [ ] Vue
• [x] Other: No framework, vanilla javascript in browser

Framework version: ie: Angular 11

Device:

• Type: Lenovo
• OS: Ubuntu
• Browser Chrome
• Version [e.g. 22]

Additional notes

[kevinbuhmann]

You can use Clarity Core without a framework, but you need a build system (e.g. rollup) to resolve and bundle the package imports or you need to use absolute urls (e.g. CDN) for the imported files.

Rollup example: https://stackblitz.com/edit/clarity-typescript-demo?file=src%2Findex.ts

CDN example: https://stackblitz.com/edit/clarity-cdn-demo?file=index.html

[Rebolon]

Thanks for the answer Kevin. I may send a pull request about the documentation to add this information.

[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.