TYPO3 12后端模块自定义JavaScript模块无法加载问题排查

• 修正命名空间拼写错误
  你的Services.yaml中控制器命名空间的Vendeor是拼写错误，正确应为Vendor。这个错误会导致PageRenderer无法被正确注入，后续加载JS模块的代码根本不会执行。修正后的配置：

  Vendor\package\Controller\Backend\BackendModuleController:
      tags: ['backend.controller']
      arguments:
        $pageRenderer: '@TYPO3\CMS\Core\Page\PageRenderer'
  

• 确认JS模块符合ES规范
  TYPO3 12要求JS模块遵循ES模块标准，你的backend-module.js需要正确导出或可被解析：

  // 示例：默认导出执行函数
  export default function initBackendModule() {
      console.log('自定义后端模块JS加载成功');
      // 你的业务逻辑
  }
  
  // 或者直接执行代码（需符合ES模块语法）
  console.log('模块已加载');
  

• 验证模块实际可被导入
  在浏览器控制台手动执行导入命令，排查是否有加载错误：

  import('@vendor/package/backend-module.js').then(module => {
      console.log('模块导入成功', module);
  }).catch(err => console.error('模块导入失败', err));
  

  若出现404，需再次确认：

  • 扩展key是否与EXT:vendor一致（注意扩展key全小写）
  • JS文件路径是否为EXT:vendor/Resources/Public/JavaScript/backend-module.js

• 检查控制器方法与模板渲染

  • 在initializeAction中添加调试代码，确认方法是否被执行：

    public function initializeAction(): void
    {
        var_dump('initializeAction 已执行');
        $this->pageRenderer->loadJavaScriptModule('@vendor/package/backend-module.js');
    }
    

  • 确保后端模块模板未破坏PageRenderer输出，比如正确使用f:be.container视图助手，未禁用默认JS渲染逻辑。

• 强制清除系统缓存
  修改JavaScriptModules.php、Services.yaml等配置文件后，必须清除全部系统缓存（包括配置缓存），否则新配置不会生效。

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