AssetMapper's importmap key is missing project prefix when deploying to subdirectory #52520
Description
Symfony version(s) affected
6.3, 6.4
Description
Projects using AssetMapper and deployed to a subdirectory (e.g., https://dev.local/asset-mapper-test) are unable to load assets imported in app.js. For example, app.js would include assets with the following:
assets/app.js
import './bootstrap.js';The importmap is rendered without the project prefix ("asset-mapper-test"), leading to a 404:
index.php
<script type="importmap">
{
"imports": {
"app": "/asset-mapper-test/assets/app-8b5b10df553be204955ec428f07f7774.js",
"/assets/bootstrap.js": "/asset-mapper-test/assets/bootstrap-c423b8bbc1f9cae218c105ca8ca9f767.js",
"@Symfony.com/stimulus-bundle": "/asset-mapper-test/assets/@symfony/stimulus-bundle/loader-e1ee9ace0562f2e6a52301e4ccc8627d.js",
"@hotwired/stimulus": "/asset-mapper-test/assets/vendor/@hotwired/stimulus-b5b1d00e42695b8959b4a1e94e3bc92a.js",
"/assets/@symfony/stimulus-bundle/controllers.js": "/asset-mapper-test/assets/@symfony/stimulus-bundle/controllers-9ecc391c3a41226613a9c690f864b6b8.js",
"/assets/controllers/hello_controller.js": "/asset-mapper-test/assets/controllers/hello_controller-7e7d7d4d4fc7f0016ac0f083fefacc14.js"
}
}
</script>The missing asset prefix (subdirectory) causes the resource to be unversioned (Figure 1).
Figure 1. Request initiator chain showing an unversioned bootstrap.js request
How to reproduce
- Configure a server for subdirectory deployment. I used Apache2 for this:
Alias /asset-mapper-test/ /srv/https/dev.local/asset-mapper-test/public/
<Directory /srv/https/dev.local/asset-mapper-test/public>
AllowOverride None
Require all granted
<FilesMatch \.php$>
SetHandler "proxy:unix:/run/php/php8.2-fpm.sock|fcgi://localhost"
</FilesMatch>
DirectoryIndex index.php
Options FollowSymlinks
<IfModule mod_negotiation.c>
Options -MultiViews +FollowSymlinks
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /asset-mapper-test
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !=/favicon.ico
RewriteRule ^ ./index.php [L]
</IfModule>
<IfModule !mod_rewrite.c>
<IfModule mod_alias.c>
RedirectMatch 307 ^/$ /index.php/
</IfModule>
</IfModule>
</Directory>
- Create a new Symfony (* 6.4.x-dev) project with AssetMapper as a dependency. At the time of this submission, I configured composer with:
{
"minimum-stability": "dev",
"prefer-stable": false,
"extra": {
"symfony": {
"allow-contrib": false,
"require": "^6.4-dev"
}
},
}
- Add a javascript file to the project:
assets/some-dependency.js
console.log("Woot!");- Import the dependency:
assets/app.js
/*
* Welcome to your app's main JavaScript file!
*
* This file will be included onto the page via the importmap() Twig function,
* which should already be in your base.html.twig.
*/
import './some-dependency.js';
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉')- Check the browser console for the log line and network loaded assets. Also review
./bin/console debug:asset-map --fullfor mappings.
Possible Solution
No response
Additional Context
Also see #51417.