Custom grafana Panel Plugin with React public/@emotion/react?_cache=1636627706343 404 (Not Found). system.js

  • What Grafana version and what operating system are you using?
    Grafana 8.2.3
    MacOS 10.15.7

  • What are you trying to achieve?
    I’m creating a custom plugin with react to have a material icons in Panel Plugin

  • How are you trying to achieve it?
    I used a template from grafana documentation, and building over it search bar in a panel with material icons

  • What happened?
    I’m getting error for public/@emotion/react?_cache=1636627706343 404 (Not Found). system.js
    but public/plugins/plugin-test/module.js?_cache=1636627706343 works fine

  • What did you expect to happen?
    The expectation is library path should be correct

  • Can you copy/paste the configuration(s) that you are having problems with?
    default.ini configurations

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.

  1. Request URL:
    http://localhost:3000/public/@emotion/react?_cache=1636627706343
  2. Request Method:
    GET
  3. Status Code:
    404 Not Found

Have someone faced the same issue? Thanks for help in advance.

1 Like

The path to the icon looks a bit weird to me. Could you show how you’re using the icon in your code?

I am also facing this issue by just installing the plugin

INFO[01-17|08:44:07] Request Completed                        logger=context userId=1 orgId=1 uname=admin method=GET path=/api/plugins/marcusolsson-calendar-panel/markdown/help status=404 remote_addr=[::1] time_ms=11 size=68 referer="http://localhost:3000/plugins/marcusolsson-calendar-panel?page=overview"
INFO[01-17|08:44:11] Downloaded marcusolsson-calendar-panel v0.5.0 zip successfully logger=plugin.installer
INFO[01-17|08:44:11] Plugin registered                        logger=plugin.manager pluginId=marcusolsson-calendar-panel
INFO[01-17|08:44:11] Request Completed                        logger=context userId=1 orgId=1 uname=admin method=GET path=/public/emotion status=404 remote_addr=[::1] time_ms=21 size=37403 referer="http://localhost:3000/plugins/marcusolsson-calendar-panel?page=overview"

I also have the same issue with @emotion/react with our Druid Grafana plugin. I’ve tried adding to install it using the package.json’s devDependencies and Dependencies with no success.

image

Any advice would be appreciated.

I think I had a conflict between @emotion/react and @emotion/css. I went solely with @emotion/css and used its injectGlobal to do what I needed…

injectGlobal(`
  .react-datepicker__triangle {
    display: none;
  }
  .react-datepicker-popper {
    z-index: 1000 !important;
  }
`);

This topic was automatically closed after 365 days. New replies are no longer allowed.