Grafana-hourly-heatmap插件加载失败求助：ES模块转译问题

解决Grafana Hourly Heatmap插件ES模块转译失败的方案 #

• 确认版本兼容性
  先核对插件仓库标注的支持Grafana版本范围，若你当前使用的Grafana版本低于插件要求（比如插件依赖Grafana 9.x+，你用的是8.x），要么升级Grafana到对应版本，要么切换插件的兼容分支重新构建。

• 调整插件构建配置强制转译
  进入插件项目根目录，根据构建工具修改配置：

  • 若用Webpack，在webpack.config.js的module.rules中添加依赖转译规则：

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules(?!\/(d3|d3-scale|报错提示的相关模块))/,
          use: 'babel-loader',
        },
      ],
    }
    

  • 若用Vite，在vite.config.js中添加依赖预构建配置：

    export default defineConfig({
      optimizeDeps: {
        include: ['d3', 'd3-scale', '相关依赖包'],
      },
    });
    

  执行yarn build或npm run build重新构建插件。

• 配置Grafana转译白名单
  打开Grafana的grafana.ini配置文件，找到[plugins]段，添加：

  plugin_es_module_transpilation_whitelist = marcusolsson-hourlyheatmap
  allow_loading_unsigned_plugins = marcusolsson-hourlyheatmap
  

  保存后重启Grafana服务。

• 使用官方预构建包
  跳过自行构建步骤，直接从插件的GitHub Releases页面下载编译完成的zip包，解压到Grafana插件目录（默认路径：/var/lib/grafana/plugins或data/plugins），重启Grafana后加载插件。

内容的提问来源于stack exchange，提问作者Turtles