Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BX Progress Indicator Skeleton]: Vue: Unknown custom element: <bx-progress-indicator-skeleton> #9825

Closed
2 tasks done
AlessandroPomponio opened this issue Dec 14, 2022 · 0 comments
Closed
2 tasks done

[BX Progress Indicator Skeleton]: Vue: Unknown custom element: <bx-progress-indicator-skeleton> #9825

AlessandroPomponio opened this issue Dec 14, 2022 · 0 comments
Assignees
@annawen1
Labels
bug Something isn't working dev Needs some dev work package: carbon web components

Comments

@AlessandroPomponio
Copy link

Description

In a Vue page we import import "carbon-web-components/es/components/progress-indicator/index.js"; and use the bx-progress-indicator-skeleton component. While it seems to display properly, in the console we see:

[Vue warn]: Unknown custom element: <bx-progress-indicator-skeleton> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <ExperimentView> at src/views/ExperimentView/ExperimentView.vue
       <CvContent>
         <App> at src/App.vue
           <Root>

We were able to track it down to a probable missing import './progress-indicator-skeleton'; in https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/carbon-web-components/src/components/progress-indicator/index.ts

Component(s) impacted

bx-progress-indicator-skeleton: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/carbon-web-components/src/components/progress-indicator/index.ts

Browser

Microsoft Edge

Carbon for IBM.com version

v1.25.0

Severity

Severity 4 = The problem is not visible to or noticeable to an average user. Affects minor functionality, no workaround needed.

Application/website

https://github.com/st4sd/st4sd-registry-ui

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

Steps to reproduce the issue (if applicable)

While locally developing a Vue page and using "@carbon/ibmdotcom-web-components": "^1.25.0",:

  • Add import "carbon-web-components/es/components/progress-indicator/index.js";
  • Add to the page:
        <bx-progress-indicator-skeleton vertical>
          <bx-progress-step-skeleton vertical></bx-progress-step-skeleton>
          <bx-progress-step-skeleton vertical></bx-progress-step-skeleton>
          <bx-progress-step-skeleton vertical></bx-progress-step-skeleton>
          <bx-progress-step-skeleton vertical></bx-progress-step-skeleton>
        </bx-progress-indicator-skeleton>
  • Check the console for the warning

Release date (if applicable)

No response

Code of Conduct
@AlessandroPomponio AlessandroPomponio added bug Something isn't working dev Needs some dev work labels Dec 14, 2022
@annawen1 annawen1 mentioned this issue Dec 21, 2022
Merged
kodiakhq bot pushed a commit that referenced this issue Dec 22, 2022
@annawen1
fix(progress-indicator): add missing import for progress indicator sk…
7b28a85 
…eleton (#9853)

### Related Ticket(s)

[BX Progress Indicator Skeleton]: Vue: Unknown custom element: <bx-progress-indicator-skeleton> #9825

### Description

For adopter using `import "@carbon/web-components/es/components/progress-indicator/index.js"` and `bx-progress-indicator-skeleton` there is an error. Seems adding the missing import to the `index.js` file should resolve the issue.

### Changelog

**New**

- add import for `progress-indicator-skeleton` in the index.js file

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Dec 4, 2023
@annawen1
fix(progress-indicator): add missing import for progress indicator sk…
c5a961d 
…eleton (carbon-design-system#9853)

### Related Ticket(s)

[BX Progress Indicator Skeleton]: Vue: Unknown custom element: <bx-progress-indicator-skeleton> carbon-design-system#9825

### Description

For adopter using `import "@carbon/web-components/es/components/progress-indicator/index.js"` and `bx-progress-indicator-skeleton` there is an error. Seems adding the missing import to the `index.js` file should resolve the issue.

### Changelog

**New**

- add import for `progress-indicator-skeleton` in the index.js file

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 11, 2024
@annawen1
fix(progress-indicator): add missing import for progress indicator sk…
75b4e4d 
…eleton (carbon-design-system#9853)

### Related Ticket(s)

[BX Progress Indicator Skeleton]: Vue: Unknown custom element: <bx-progress-indicator-skeleton> carbon-design-system#9825

### Description

For adopter using `import "@carbon/web-components/es/components/progress-indicator/index.js"` and `bx-progress-indicator-skeleton` there is an error. Seems adding the missing import to the `index.js` file should resolve the issue.

### Changelog

**New**

- add import for `progress-indicator-skeleton` in the index.js file

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@annawen1 annawen1

Labels
bug Something isn't working dev Needs some dev work package: carbon web components
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@jeffchew @AlessandroPomponio @RichKummer @ljcarot @IgnacioBecerra @oliviaflory @annawen1