Giters

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.

Home Page:https://clarity.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using CDS core without framework fails because of import problem

Rebolon opened this issue · comments

commented

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:

  • Clarity Core
  • Clarity Angular/UI

Clarity version:

  • v5.x
  • v6.x

Framework:

  • Angular
  • React
  • Vue
  • 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

commented

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

commented

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

commented

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.