Module Not Found Error with @janus-idp/backstage-plugin-topology v1.22.1

[youngyol]

Describe the bug

When using the @janus-idp/backstage-plugin-topology with my Backstage application, I encounter the following error:

[0] ERROR in ../../node_modules/@janus-idp/backstage-plugin-topology/dist/utils/icons.esm.js 1:0-75
[0] Module not found: Error: Can't resolve '../plugins/topology/src/imgs/logos/defaulthub.svg' in '/Users/xyz/develop/backstage-demo/node_modules/@janus-idp/backstage-plugin-topology/dist/utils'
[0]
[0] ERROR in ../../node_modules/@janus-idp/backstage-plugin-topology/dist/utils/icons.esm.js 2:0-70
[0] Module not found: Error: Can't resolve '../plugins/topology/src/imgs/logos/django.svg' in '/Users/xyz/develop/backstage-demo/node_modules/@janus-idp/backstage-plugin-topology/dist/utils'
[0]
[0] ERROR in ../../node_modules/@janus-idp/backstage-plugin-topology/dist/utils/icons.esm.js 3:0-70
[0] Module not found: Error: Can't resolve '../plugins/topology/src/imgs/logos/dotnet.svg' in '/Users/xyz/develop/backstage-demo/node_modules/@janus-idp/backstage-plugin-topology/dist/utils'
[0]
[0] ERROR in ../../node_modules/@janus-idp/backstage-plugin-topology/dist/utils/icons.esm.js 4:0-70
[0] Module not found: Error: Can't resolve '../plugins/topology/src/imgs/logos/drupal.svg' in '/Users/xyz/develop/backstage-demo/node_modules/@janus-idp/backstage-plugin-topology/dist/utils'
[0] 

This error occurs when I try to load my application at localhost:3000. However, when I revert to version 1.21.11 of the plugin, everything works fine without any issues.

Expected Behavior

What are the steps to reproduce this bug?

1. Follow the documentation to register the Topology plugin.
2. Run yarn dev
3. Navigate to localhost:3000 in a browser.
4. Observe the error message described above.

Versions of software used and environment

"@janus-idp/backstage-plugin-topology": "^1.22.1",

OS:   Darwin 23.5.0 - darwin/arm64
node: v20.12.1
yarn: 1.22.22
cli:  0.26.10 (installed)
backstage:  1.28.0

[ciiay]

Hi @youngyol I have tried to reproduce this issue locally, but the svg icons are loaded correctly in http://localhost:3000/static/ in Sources. Can you try with backstage 1.26.5 once? In package.json it says

  "backstage": {
    "role": "frontend-plugin",
    "supported-versions": "1.26.5"
  },

[youngyol]

Hi @ciiay, thank you for your response.

I tried downgrading to Backstage 1.26.0, but still encounter the same issue.

Here are the steps I followed to set up:

# Created a new Backstage app version 1.26.0
npx @backstage/[email protected]

# Added the Kubernetes plugin (frontend)
yarn --cwd packages/app add @backstage/plugin-kubernetes

# Added the Kubernetes plugin (backend)
yarn --cwd packages/backend add @backstage/plugin-kubernetes-backend

# Added the Topology plugin
yarn workspace app add @janus-idp/backstage-plugin-topology

# Enabled the TOPOLOGY tab in packages/app/src/components/catalog/EntityPage.tsx:
import { TopologyPage } from '@janus-idp/backstage-plugin-topology';

const serviceEntityPage = (
  <EntityLayout>
    ...
    <EntityLayout.Route path="/topology" title="Topology">
      <TopologyPage />
    </EntityLayout.Route>
  </EntityLayout>
);

# To start the app
yarn install 
yarn dev

I also checked the node_modules/@janus-idp/backstage-plugin-topology/dist/utils/icons.esm.js file located at the project root, and it contains the following imports:

import defaultImg from '../plugins/topology/src/imgs/logos/defaulthub.svg';
import djangoImg from '../plugins/topology/src/imgs/logos/django.svg';
import dotnetImg from '../plugins/topology/src/imgs/logos/dotnet.svg';
...

However, I noticed that the actual images are located at node_modules/@janus-idp/backstage-plugin-topology/dist/imgs/logos/*.svg. This discrepancy might be causing the issue, but I am not entirely sure.

I want to mention that I am new to Backstage and TypeScript, so I might be missing something obvious.

I would appreciate further assistance. Is there a specific configuration or additional step that I might be missing?

Thank you for your help.