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

[ygogol]

• 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://grafana.staged-by-discourse.com/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.

[marcusolsson]

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

[jayarajesvar]

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://grafana.staged-by-discourse.com/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://grafana.staged-by-discourse.com/plugins/marcusolsson-calendar-panel?page=overview"

[dlyoungerman]

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.

Any advice would be appreciated.

[dlyoungerman]

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;
  }
`);