Webpack error when updating panel variable using locationService.partial()

[ollieboyd]

Hi, following the example here:

Add support for variables in plugins

import { locationService } from '@grafana/runtime';

locationService.partial({ 'var-service': 'billing' }, true);

I get the console error

Uncaught TypeError: _grafana_runtime__WEBPACK_IMPORTED_MODULE_2__.locationService is undefined

Grafana v7.5.15

This is my code, does anyone know what this means? Thanks so much!

import React from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import { Button } from '@grafana/ui';
import { locationService } from '@grafana/runtime';

interface Props extends PanelProps<SimpleOptions> {}

export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {

  const updateVar = () => {
    console.log('clicked');
    locationService.partial({ 'var-service': 'billing' }, true);
  }
    
  return (
    <div>
      <Button
        variant="primary"
        title="this is title"
        size="lg"
        className=""
        onClick={updateVar}
      >
        Click me
      </Button>
        
    </div>
  );
};

[marcusolsson]

This was updated in a recent version of Grafana, here’s the docs for 7.5:

Add support for variables in plugins

Note that you need to use getLocationSrv instead of the new locationService.

[rwalker]

This has also now being outdated. See “LocationService replaces getLocationSrv” in Plugin migration guide | Grafana documentation for good examples on the latest methods.