RequireJS callback not called in Typo3

Question

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?

Wolffc Wolffc · Accepted Answer · 2020-12-20T20:39:12

TYPO3 does not load any Javascript by default in the frontend.

What your frontend renders is defined by your templates (typoscript/fluid)

You probably looking for page.includeJS or a similar configuration. But the best aproach can very widely depending on how you render your frontend and what other extensions you have in your site like vhs/flux

See this core document for reference of the PAGE OBJECT https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Setup/Page/Index.html#page

RequireJS callback not called in Typo3

2 Answers