Assets not found

[ventura]

After updating to the latest version of @grafana/create-plugin (4.16.2), my gradient icons are no longer found:

Here is my code function to obtain the asset path: (notice it starts with img/, I think the images used to be copied to dist/img)

public static getGradientIcon(gradient: PaletteName): string {
    return require('img/' + gradient.toLowerCase() + '.svg');
}

Here’s my output dist on npm run dev:

Here’s my output dist on npm run build:

Here is my repository: GitHub - nicfv/Psychart: Grafana plugin to display air conditions on a psychrometric chart.

Any idea why this happens? Can this please be fixed in the next version of grafana/create-plugin?

[jackwestbrook]

@ventura

Any idea why this happens? Can this please be fixed in the next version of grafana/create-plugin?

Hello, thanks for reporting this.

From debugging and looking at the commit history the issue you’re facing is because the publicPath.ts file is incorrect. That is not the pluginId of your plugin (plugin.json). Did you edit this file for some reason?

I tried to reproduce it by cloning the repo, checked out v4.3.2 tag, and then running npx @grafana/create-plugin@latest update. Then doing a docker compose up but the icons load without issue:

[ventura]

@jackwestbrook

From debugging and looking at the commit history the issue you’re facing is because the publicPath.ts file is incorrect. That is not the pluginId of your plugin (plugin.json).

Thank you so much for tracking this down! This may be the root cause of my issue. Unfortunately, I can’t verify because of another issue in Old version of plugin loaded in development environment

No, I didn’t make any edits to that file, in fact, it looks like the file was just created in that commit. I think there is some weird behavior going on since my plugin title (psychart) doesn’t match the ID (psychrometric). That’s something that diverged early on in development and would be difficult to fix now. I’m not even sure it’s possible to change the plugin ID now that it is published.

[jackwestbrook]

@ventura

Thank you so much for tracking this down! This may be the root cause of my issue.

You’re welcome. I’m 100% sure it’s why the icons don’t load. Look at the url paths in chrome network inspector and you should see that the broken images have an incorrect plugin-id in their path. When I opened one in a new chrome tab the backend reported the plugin couldn’t be found.

@ventura

No, I didn’t make any edits to that file, in fact, it looks like the file was just created in that commit. I think there is some weird behavior going on since my plugin title (psychart) doesn’t match the ID (psychrometric).

That’s slightly worrying as it would suggest there is a bug in create-plugin. However I cannot reproduce it using your repo as a test case. I checked out the commit prior to the create-plugin update commit in your repo and then ran npx @grafana/create-plugin@latest update and the publicPath.ts file was generated correctly. create-plugin doesn’t use the plugin title for generating this file - it always comes from the id found in the plugin.json file.

@ventura

Unfortunately, I can’t verify because of another issue in Old version of plugin loaded in development environment

I verified it using the docker-compose.yml developement env in the repo. I’ll take a look at your other issue. I’d imagine it’s something related to the structure of the plugins folder you’re passing to the grafana server.

[academo]

@ventura did you bootstrap the plugin using the create-plugin tool or did you use another plugin as a base to develop yours? Or perhaps you started your plugin with a name and later on you renamed it to something else?

[ventura]

Instead of update, I used create-plugin in a clean, empty directory and transferred my src files. That would likely explain the psychart-panel instead of psychrometric-panel.

[ventura]

@jackwestbrook

You’re welcome. I’m 100% sure it’s why the icons don’t load. Look at the url paths in chrome network inspector and you should see that the broken images have an incorrect plugin-id in their path. When I opened one in a new chrome tab the backend reported the plugin couldn’t be found.

Thanks again for your help on this! I was able to resolve my other issue (unrelated to this one) and was able to test this in development, and it works perfectly.

It looks like Create Plugin: Template dynamic public path by jackw · Pull Request #1023 · grafana/plugin-tools · GitHub fixes any issues that would have arisen from this issue here.

[jackwestbrook]

@ventura

It looks like Create Plugin: Template dynamic public path by jackw · Pull Request #1023 · grafana/plugin-tools · GitHub fixes any issues that would have arisen from this issue here.

Yep, we’ve now put a fix in place for this.