Symfony 6.1+EasyAdmin 4中Symfony UX Chart无法显示问题排查

1. 确认基础依赖与安装配置 #

• 验证已通过Composer安装symfony/ux-chartjs：

  composer require symfony/ux-chartjs
  

• 确保前端依赖已安装并构建：

  npm install && npm run dev
  

  使用Yarn则替换为yarn install && yarn dev

2. 检查EasyAdmin Dashboard的Assets配置 #

添加configureAssets后出现报错，先确认写法是否正确，入口名称需与Webpack配置匹配：

use EasyCorp\Bundle\EasyAdminBundle\Config\Assets;

class DashboardController extends AbstractDashboardController
{
    // 其他代码...

    public function configureAssets(): Assets
    {
        return Assets::new()
            ->addWebpackEncoreEntry('app'); // 确保'app'是Webpack配置中定义的入口名
    }
}

3. 验证Webpack Encore配置 #

确保webpack.config.js正确处理UX组件：

const Encore = require('@symfony/webpack-encore');

// 其他配置...

// 启用Stimulus Bridge（默认由symfony/webpack-encore-bundle自动添加）
Encore.enableStimulusBridge('./assets/controllers.json');

// 确认输出与公共路径、入口配置正确
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js');

同时检查assets/controllers.json中Chartjs控制器的配置，确保fetch为eager避免延迟加载问题：

{
    "controllers": {
        "@symfony/ux-chartjs": {
            "chart": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

4. 检查Twig模板与后端Chart实例 #

确保Twig中正确渲染图表，且后端生成了合法的Chart实例：

后端控制器代码示例 #

use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;

public function index(ChartBuilderInterface $chartBuilder): Response
{
    $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
    $chart->setData([
        'labels' => ['January', 'February', 'March'],
        'datasets' => [
            [
                'label' => 'My Dataset',
                'data' => [65, 59, 80],
            ],
        ],
    ]);

    return $this->render('template.html.twig', ['chart' => $chart]);
}

Twig模板渲染代码 #

{{ render_chart(chart) }}

5. 根据控制台报错针对性处理 #

• 资源加载404：检查Webpack输出路径public/build下是否生成了对应资源，确认浏览器请求的资源路径与setPublicPath配置一致。
• Stimulus相关报错：重新运行npm run dev构建资源，验证controllers.json中Chartjs控制器已启用。

6. 最终重置步骤 #

执行以下操作确保所有配置生效：

# 清除Symfony缓存
php bin/console cache:clear

# 重新构建前端资源
npm run dev

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