Grafana面板插件模板构建报错求助：base_dir路径问题

问题场景 #

我按照Grafana官方教程创建面板插件，执行步骤如下：

• 运行 npm init @grafana/plugin，选择面板类型并填写名称、描述等信息
• 执行 npm i 安装依赖
• 执行 npm run dev 启动开发服务时，出现以下错误：

ERROR in ./module.ts
Module build failed (from ../node_modules/swc-loader/src/index.js):
Error: failed to handle: base_dir(./src) must be absolute. Please ensure that `jsc.baseUrl` is specified correctly.

webpack 5.88.2 compiled with 1 error in 330 ms
Type-checking in progress...
thread '<unnamed>' panicked at 'base_dir(./src) must be absolute. Please ensure that `jsc.baseUrl` is specified correctly.', /usr/local/cargo/registry/src/index.crates.io-6f17d22bba15001f/swc_ecma_transforms_module-0.173.28/src/path.rs:104:13
assets by status 17.1 KiB [cached] 6 assets
./module.ts 39 bytes [built] [1 error]

ERROR in ./module.ts
Module build failed (from ../node_modules/swc-loader/src/index.js):
Error: failed to handle: base_dir(./src) must be absolute. Please ensure that `jsc.baseUrl` is specified correctly.

解决方法 #

1. 修正.swcrc中的jsc.baseUrl配置 #

打开项目根目录的.swcrc文件，将jsc.baseUrl设置为本地绝对路径，示例：

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "baseUrl": "/Users/xxx/Projects/my-grafana-panel-plugin/src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

替换路径为你本地项目的src目录绝对路径。

2. 更新插件初始化工具版本 #

该错误可能是旧版本@grafana/create-plugin的bug，尝试使用最新版本重新初始化项目：

npm init @grafana/plugin@latest

如果是现有项目，更新依赖：

npm install @grafana/create-plugin@latest --save-dev

3. 清理依赖缓存并重装 #

缓存的依赖可能导致配置异常，执行以下命令清理后重新安装：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

4. 检查webpack配置（如有自定义） #

如果项目有自定义webpack配置，确保SWC loader的配置中传递了正确的baseUrl，或设置webpack上下文为项目根目录。

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