[Autocomplete] - Asset mapper installs wrong css file

[leevigraham]

Following the install instructions on a new project I get the following error:

An exception has been thrown during the rendering of a template ("The autoimport "tom-select/dist/css/tom-select.default.css" could not be found in importmap.php. Try running "php bin/console importmap:require tom-select/dist/css/tom-select.default.css".") in base.html.twig at line 12.

I believe this is because my install of TomSelect is version 2.4.3:

While the current version of Autocomplete expects 2.2.2

https://github.com/symfony/ux/blob/2.x/src/Autocomplete/assets/package.json#L40

Looking at the difference between jsdeliver package.json for 2.2.2 and 2.4.3 it seems the exported files have changed.

2.2.2;

2.4.3:

It seems 2.4.1 introduced the style property in the package.json: https://www.jsdelivr.com/documentation#id-configuring-a-default-file-in-packagejson

[Kocal]

Hi, and thanks for raising this issue and for your investigation!

That's a bit unlucky that it downloads the minified version of dist/css/tom-select.default.css (with the .min suffix) and not the exact one defined in their style configuration.

I think the best we can do here is to mention the .min versions in our package.json's symfony.controllers.autocomplete.autoimport files, and modify the documentation.

[leevigraham]

I think the best we can do here is to mention the .min versions in our package.json's symfony.controllers.autocomplete.autoimport files, and modify the documentation.

Yep. Setting the symfony.controllers.autocomplete.autoimport to use the /dist/css/tom-select.default.min.css would ensure the install runs smoothly. I'm happy to create and test a PR.

I think the docs section will need to be updated to explicitly demonstrate how to import bootstrap alternatives. eg:

php bin/console importmap:require tom-select/dist/css/tom-select.bootstrap4.css

I also wonder if adding the bootstrap versions to the importmap would simplify things.

---

Long debugging…

Related: orchidjs/tom-select#771

Learning Asset mapper as I go here…

As part of the install process Asset Mapper tries to install tom-select@^2.2.2 as per the requirements.

./bin/console --ansi importmap:require 'tom-select@^2.2.2'

This results in the url: https://data.jsdelivr.com/v1/packages/npm/tom-select/resolved?specifier=%5E2.2.2

Take note of the %5E which is ^. This url returns the data for version 2.4.3 (correctly):

https://data.jsdelivr.com/v1/packages/npm/tom-select/resolved?specifier=%5E2.2.2

{
	"type": "npm",
	"name": "tom-select",
	"version": "2.4.3",
	"links": {
		"self": "https://data.jsdelivr.com/v1/packages/npm/tom-select@2.4.3",
		"entrypoints": "https://data.jsdelivr.com/v1/packages/npm/tom-select@2.4.3/entrypoints",
		"stats": "https://data.jsdelivr.com/v1/stats/packages/npm/tom-select@2.4.3"
	}
}

Comparing the entry points values:

https://data.jsdelivr.com/v1/packages/npm/tom-select@2.2.2/entrypoints

{
	"entrypoints": {
		"js": {
			"file": "/dist/js/tom-select.complete.min.js",
			"guessed": false
		},
		"css": {
			"file": "/dist/css/tom-select.min.css",
			"guessed": true
		}
	}
}

We can see the 2.2.2 is a guessed css file. Interestingly the 2.2.2 version /dist/css/tom-select.min.css doesn't match the auto import value of /dist/css/tom-select.default.css either https://github.com/symfony/ux/blob/2.x/src/Autocomplete/assets/package.json#L32

https://data.jsdelivr.com/v1/packages/npm/tom-select@2.4.3/entrypoints

{
	"entrypoints": {
		"js": {
			"file": "/dist/js/tom-select.complete.min.js",
			"guessed": false
		},
		"css": {
			"file": "/dist/css/tom-select.default.min.css",
			"guessed": false
		}
	}
}

The 2.4.3 entry points are what appears in the jsdeliver UI: https://www.jsdelivr.com/package/npm/tom-select

I have no idea why jsdeliver assumes /dist/css/tom-select.default.min.css is the correct style entry point. My only guess is that given there is a /dist/css/tom-select.default.min.css in the package and the the package.json style points to /dist/css/tom-select.default.css that some remapping is done under the hood in jsdeliver.

Here's all the files that are available in the 2.4.3 package. https://www.npmjs.com/package/tom-select?activeTab=code. These files include the expected 2.2.2 /dist/css/tom-select.default.css file.

[leevigraham]

@Kocal I've issued a PR to address the issues raised here.

#2902

The solution I went with was just to import the three files defined in the autoimport section of the package.json.

This means the docs don't need to change and the files will "always" be there.

"Always" … is up until the tomselect devs change their build.

[alexislefebvre]

The solution I went with was just to import the three files defined in the autoimport section of the package.json.

This means the docs don't need to change and the files will "always" be there.

"Always" … is up until the tomselect devs change their build.

What about using a fixed version for tomselect? It may avoid unexpected issues later.