Toolkit: Wrong publicPath used for plugin files

[ZuperZee]

What happened:

When using dynamic imports the code tries to retrieve the file from the base.

What you expected to happen:

The code should retrieve the code from the plugin path.

How to reproduce it (as minimally and precisely as possible):

Create a plugin.
Create a file to import

test.ts

export default "test"

import the file

panel.ts

...
      import('./test').then(({ default: test }) => {
        console.log(test);
      });
...

Anything else we need to know?:

Environment:

• Grafana version: v8.2.0
• Data source type & version:
• OS Grafana is installed on:
• User OS & Browser:
• Grafana plugins:
• Others:

[ZuperZee]

grafana/packages/grafana-toolkit/src/config/webpack.plugin.config.ts

Line 168 in 82bae89

publicPath: '/',

should be

publicPath: `public/plugins/${getPluginId()}`,

There could be some problems if some plugins based the code that it loads code from the base.

[ZuperZee]

A workaround is to create a webpack.config.js with this content (in the root of your plugin)

webpack.config.js

module.exports.getWebpackConfig = (config, options) => ({
  ...config,
  output: {
    ...config.output,
    publicPath: 'public/plugins/plugin-id/',
  },
});

The plugin id is the id written in the plugin.json file.

[mckn]

You are correct! However we are a bit hesitant to introduce this into the grafana-toolkit since it might have a negative impact on older angular plugins that are using the "legacy imports".

I will add this to the documentation about how to dynamically import modules in your plugin.