HTTP2/Preloading not working with typo3/composer-cms-installers version 4+

[rintisch]

If I try to use the HTTP2/Preloading feature as described in the docs with typo3/composer-cms-installers version 4+.

The problem:

• The preloaded font comes from the _assets directory e.g. _assets/43d511a2adc66ee2c0e3ec64723dffa8/Fonts/my-font.woff2 and is unversioned.
• The font from the SCSS is in the build folder (as expected), e.g. /build/fonts/my-font.1cd5ff3c.woff2 and is versioned

This way the preloaded font is not used at all because it is never called this way in the CSS which is build with webpack.

The setup Usage of PreloadViewHelper in the Fluid Template:

<e:preload 
    attributes="{type: 'font/woff2', crossOrigin: 'anonymous'}" 
    as="font" 
    uri="{e:asset(pathToFile: 'EXT:sitepackage/Resources/Public/Fonts/my-font.woff2')}"
 />

Usage in the SCSS:

@font-face {
  ...
  url('../../../packages/sitepackage/Resources/Public/Fonts/my-font.woff2') format('woff2'), 
}

I guess (as the title says) the problem is the typo3/composer-cms-installers in Version 4!?

[sabbelasichon]

@rintisch Thanks. Any ideas how to fix this issue?

[sabbelasichon]

@rintisch I have investigated a bit. It is a little bit tricky. If you want to fix right now, do not provide the absolute path but the relative path to the file

<e:preload 
    attributes="{type: 'font/woff2', crossOrigin: 'anonymous'}" 
    as="font" 
    uri="{e:asset(pathToFile: 'Fonts/my-font.woff2')}"
 />

[sabbelasichon]

I have to dig a little bit deeper into it to see if i can fix

[rintisch]

@sabbelasichon Wow, that was fixed quite fast at the end. Thank you!

[rintisch]

@sabbelasichon Unfortunately does the solution not change the behaviour. The problem which I described in the bullet points of the issue still occurs...

[sabbelasichon]

@rintisch I have setup an instance with a custom configuration and it worked for me. Could please investigate what happens in your case and provide a solution for it?

[sabbelasichon]

There is an inconsistency with the fonts folder. One is uppercase and the other lowercase. Did you notice that?

[rintisch]

@sabbelasichon That's true, the output of webpack is lowercase, but not the input (which is shown in the Setup section of the issue). So this seems to be a result of webpack.

What is the output of your test instance? Is the font given only once, only the preloaded and served from the build folder?

Here can you see what I get: First the preloaded fonts which are served from the AssetsViewhelper and therefore in the _assets directory and later the "ordinary" fonts from webpack which are located in the build directory.

[sabbelasichon]

@rintisch Could you please try to set the public path to your assets folder. It is tricky, because the folder is md5 hashed. But first try to add something like this to your webpack config

setPublicPath('_assets/MD_5_HASH/build')

This should fix your issue. But i have no clue how to teach webpack what is the correct public path because it is md5 hashed and depends on different path settings.

[rintisch]

@sabbelasichon Ah now I think I understand how it works (have not looked into the code). The AssetViewHelper is simply the one from TYPO3 and knows nothing about webpack. So now we have to adapt webpack? But I guess your solution would still not work in my case even if I use the solution with the setPublicPath because I use enableVersioning in the webpack.config.js.

I expected the whole time that the e:asset Viewhelper would look into the manifest.json. I thought about it for a moment and to combine those two worlds seems not easy. An idea (without really knowing whether that would work): Wouldn't it be possible to use an dedicated entrypoint from the webpack.config.js which is only used for the fonts and then use this with a ViewHelper which works the same way as the e:renderWebpackLinkTags ViewHelper to find the correct files in the manifest.json?

[sabbelasichon]

@rintisch The e:asset ViewHelpers looks into the manifest.json. It is not the one from core but a dedicated ViewHelper for Encore.