TYPO3中JavaScript文件提示TYPO3对象未定义的问题排查

问题描述 #

在TYPO3后端发起Ajax请求时，触发错误：

Uncaught ReferenceError: TYPO3 is not defined

错误出现在以下代码行：

const url = TYPO3.settings.ajaxUrls['do_something_identifier'];

相关代码与配置 #

1. Extension/Resources/Public/JavaScript/example.js #

import DocumentService from '@typo3/core/document-service.js'
import DebounceEvent from '@typo3/core/event/debounce-event.js';
import AjaxRequest from '@typo3/core/ajax/ajax-request.js';

DocumentService.ready().then(function () {
  new DebounceEvent('input', function (e) {
    const searchValue = e.target.value;
    const url = TYPO3.settings.ajaxUrls['do_something_identifier'];
    new AjaxRequest(url)
      .withQueryArguments({ search: searchValue })
      .get()
      .then(async function (response) {
        const resolved = await response.resolve();
        console.log(resolved.result);
      });
  }, 250).bindTo(document.querySelector('#html-element'));

})

2. HTML调用代码 #

<f:section name="Main">
  <f:be.pageRenderer includeJavaScriptModules="{
     0: '@vendor/extension/example.js'
  }" />

3. Extension/Configuration/Backend/AjaxRoutes.php #

<?php

return [
    'do_something_identifier' => [
        'path' => '/extension/controller/do-something',
        'target' => \Vendor\Extension\Controller\ExampleController::class . '::doSomethingAction'
    ],
];

4. Extension/Configuration/JavaScriptModules.php #

<?php

return [
    'dependencies' => ['core', 'backend'],
    'imports' => [
        '@vendor/extension/' => 'EXT:extension/Resources/Public/JavaScript/',
    ],
];

5. Extension/Configuration/TypoScript/setup.typoscript #

plugin.tx_extension {
    mvc.callDefaultActionIfActionCantBeResolved = 1

    view {
        templateRootPaths {
            10 = {$plugin.tx_extension.view.templateRootPath}
        }

        partialRootPaths {
            10 = {$plugin.tx_extension.view.partialRootPath}
        }

        layoutRootPaths {
            10 = {$plugin.tx_extension.view.layoutRootPath}
        }
    }
}

问题根源与解决方法 #

核心原因 #

你使用ES模块方式引入JavaScript代码，而全局TYPO3对象是挂载在传统全局作用域（window）下的。ES模块拥有独立的作用域，默认无法直接访问全局作用域中的变量，因此直接写TYPO3会触发未定义错误。

解决步骤 #

1. 通过window访问全局TYPO3对象
   修改出错代码行，明确通过window对象获取全局变量：

   const url = window.TYPO3.settings.ajaxUrls['do_something_identifier'];
   

2. 验证Ajax路由是否生效
   修改代码后，清除TYPO3缓存，然后在浏览器控制台执行window.TYPO3.settings.ajaxUrls['do_something_identifier']：

   • 如果返回正确的URL，说明路由注册正常，问题已解决
   • 如果返回undefined，检查AjaxRoutes.php的路径是否正确（必须放在Configuration/Backend/目录下），以及路由标识符的拼写是否完全一致，之后再次清除缓存测试

3. 确认模块依赖加载
   你的JavaScriptModules.php已经声明了backend依赖，这会确保后端基础脚本加载完成，无需额外调整；如果仍有问题，可以尝试在模块中显式导入@typo3/backend/global-event-handler.js等后端核心模块，确保全局对象初始化完成。

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