grafana/grafana-starter-app

Unable to display react page content when accessing it

Opened this issue · 4 comments

I modified the code to set the root page to the react "ExampleRootPage" instead of the legacy AngularExamplePageCtrl.

To do so, I added the page entry to includes array:

"includes": [
    {
      "type": "page",
      "name": "React Page",
      "component": "ExampleRootPage",
      "role": "Viewer",
      "addToNav": true,
      "defaultNav": true
    },
...

and in module.ts:

export {
  ExampleConfigCtrl as ConfigCtrl,
  // AngularExamplePageCtrl,
  ExampleRootPage // Must match `pages.component` in plugin.json
};

export const plugin = new AppPlugin<ExampleAppSettings>()
  .setRootPage(ExampleRootPage)

We can see the page in the left panel after enabling the plugin, however, when we try to display the content of the page, we have the following error in console:

in ChangeTracker.ts:6
Plugin component error Error: [$injector:unpr] Unknown provider: propsProvider <- props
http://errors.angularjs.org/1.6.9/$injector/unpr?p0=propsProvider%20%3C-%20props
    at angular.js:116
    at angular.js:4887
    at Object.s [as get] (angular.js:5047)
    at angular.js:4892
    at s (angular.js:5047)
    at u (angular.js:5072)
    at Object.invoke (angular.js:5098)
    at M.instance (angular.js:11076)
    at it (angular.js:9926)
    at angular.js:9248

Do you know why ? And do you have a workaround to develop simple react pages ?

Note: config pages are working correctly.

Hi, I'm facing the same issue.
As first, your component's page should be something like that:

interface Props extends PluginConfigPageProps<PluginMeta> { }

export class Another extends PureComponent<Props> {
 ...
 render() { ... }

Then in your module.ts:

export const plugin = new AppPlugin<ExampleAppSettings>()
  .setRootPage(ExampleRootPage)  
  .addConfigPage({
    title: 'Page 1',
    icon: 'fa fa-user',
    body: Another, // Another is the name you gave to your component
    id: 'page1',
  })

@longo-andrea It's for configuration pages, right ?
Because everything works as expected for configuration pages (pages displayed as tabs in the configuration section).
This issue concerns "normal" pages of an app plugin.

Yes, React pages give me the same problem, instead configs pages working well.

nikos commented

I am facing the exact same issue, even after removing the constructor and simplifying the page to:

import React, { PureComponent } from 'react';

export class SampleAppPage extends PureComponent {

  render() {
    return (
      <div>
        <h1>Hello from SamplePage</h1>
      </div>
    );
  }
}

I also added an export of SampleAppPage to module.ts to allow the reference to work. I do see the page in the navigation bar and can click on it, but no content is shown on the page itself. Anyone?