Internal issue 3115 - Error: Couldn't find host element for "ic-top-navigation" as it is unknown to this Stencil runtime.

[ticket-sync[bot]]

When running ICDS on a project, everything worked fine but randomly stopped working and posting this error message

main.tsx:9 Error: Couldn't find host element for "ic-top-navigation" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application.

This error/something similar depending what component you are using occurs even on a fresh project. It started to work today but after installing a npm package, everything broke again. After reverting the installation of the package the error still occurs

Summary of the bug

When using ICDS the error occurs, it struggles to recognise the ic-top-nav component, I found this occured when I would use tailwind alongside ICDS, however it would for an hour but immediately stoped. After removing tailwind, you would have to clear cache/history for icds to work again otherwise the error persists.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

1. Create a new vite react +SWC project
2. Install ICDS and Tailwind
3. Add tailwind to the necessary files for its use in css
4. Add an icds component to the App.tsx page

🧐 Expected behaviour

Tell us, in enough detail, what you expected to happen instead.

ICDS page should load and be able to use Tailwind alongside it, like most projects I have done in the past

Urgency

Medium, this is currently blending into my current work (main)

[GCHQ-Developer-847]

I was able to recreate this error when creating basic a Vite + React app (e.g. using npm create vite@latest my-react-app). I added some ICDS buttons to the app, did an npm install and npm build, ran the app and then in the console, this error would appear.

So it actually doesn't appear to be related to Tailwind. (Another customer said they had this error and they weren't using Tailwind either)

I tried adding this to my main.tsx, based on suggestions online, but it didn't do anything:

import { defineCustomElements } from '@ukic/web-components/loader';

defineCustomElements(window);

The error appeared intermittently - it would sometimes not appear when you refresh or clear your browser cache.

[GCHQ-Developer-847]

Consider using our test app to test solutions, as it uses Vite and React.

Not sure if this shows the error currently but that might be because it may be on a previous version of Vite? Maybe consider updating the Vite version. If this causes issues then just test using a fresh Vite app.

[GCHQ-Developer-299]

Experienced by another internal user

[GCHQ-Developer-847]

Another customer is experiencing this issue now as well

[GCHQ-Developer-847]

A solution has been found for this. Just waiting for the customer who created the ticket to confirm whether they are happy for this ticket to be closed

https://github.com/mi6/ic-design-system/issues/1750 has been created - for adding the solution to the ICDS website