ES6 in the TYPO3 Backend¶
In November 2022 import maps are supported natively by Google Chrome, a polyfill is available for Firefox and Safari and included by TYPO3 Core and applied whenever an import map is emitted.
For security reasons, import map configuration is only emitted when the modules
are actually used, that means when a module has been added to the current
page response via
Exposing all module configurations is possible via
done in backend context for logged-in users to avoid disclosing installed
extensions to anonymous visitors.
A simple configuration example for an extension that maps
Complex configuration example containing recursive-lookup exclusions, third-party library definitions and overwrites:
A module can be added to the current page response either via
PageRenderer or as
In a Fluid template the
<f:be.pageRenderer> ViewHelper may be used:
Some tips on ES6¶
For a practical example on how to introduce ES6 modules into a large extension see this commit for EXT:news: [TASK] Add support for TYPO3 v12 ES6 modules.
If you still have to use jQuery in your third-party extension, include it with the following statement:
import $ from 'jquery';
backend.form is used to identify
ensures that the import maps are available for these modules
even if the element is not displayed directly.
A typical use case for this is an InlineRelationRecord where the CKEditor is not part of the main record but needs to be loaded for the child record.