Search code examples
javascriptphptypo3requirejstypo3-extensions

RequireJS callback not called in Typo3

We are working on an Typo3 extension for a bigger university website and are struggling to get custom JavaScript code using RequireJS to run in the frontend. When we tried using RequireJS to load our dependencies, we couldnt get even a simple example to work.

We tried following the offical documentation https://docs.typo3.org/m/typo3/reference-coreapi/9.5/en-us/ApiOverview/JavaScript/RequireJS/Index.html, but we just cant get Test.say() (see below) to be called.

Our project is structured as followed:

- Classes
  - (all our PHP code)
- Configuration
  - (AjaxRoutes, FlexForms and TCA) 
- Ressources
  - Private
    - Templates
      - Modulelist
        - List.html
  - Public
    - JavaScript
      - ListFilter.js
- composer.json
- ext_emconf.php
- ext_localconf.php
- ext_tables.sql

List.html:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<!-- this is just some table filled by a controller -->
<table border="1" cellspacing="1" cellpadding="5">
    <tr>
        <td>Modulname</td>
        <td>OU Name</td>
        <td>ECTS</td>
    </tr>
    <f:for each="{modules}" as="module">
        <tr>
            <td align="top">{module.name}</td>
            <td align="top">
                <f:format.crop maxCharacters="100">{module.offeredBy.name}</f:format.crop>
            </td>
            <td align="top">{module.ects}</td>
        </tr>
    </f:for>
</table>

<!-- our extension is named DemoExtension -->
<f:be.pageRenderer
    includeRequireJsModules="{
        0:'TYPO3/CMS/DemoExtension/ListFilter'
    }"
/>
</html>

ListFilter.js:

console.log("ListFilter.js loaded");
define(['jquery', 'TYPO3/CMS/Core/DocumentService'], function($, DS) {
    console.log("List.html inside define");
    var Test = {
        message: "test"
    };

    Test.say = function() {
        alert(Test.message);
    };

    $(document).ready(function() {
        console.log("List.html inside define, jQ callback");
        Test.say();
    });

    DS.ready().then(() => {
        console.log("List.html inside define, DS callback");
        Test.say();
    });

    return Test;
});

However, when loading the corresponding page, only the following line is printed to the console:

ListFilter.js loaded

We googled a lot but couldnt get it to work. What are we missing?

Solution

  • Did you actually load RequireJS?

    The special RequireJS support in TYPO3 in the PageRenderer is only available for the backend.