[Leaflet] Error during installation

[Vastuney]

Module build failed: Module not found:
"./vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js" contains a reference to the file "@symfony/ux-map/abstract-map-controller".
This file can not be found, please check it for typos or update it if the file got moved.

"./vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js" contains a reference to the file "leaflet/dist/leaflet.min.css".
This file can not be found, please check it for typos or update it if the file got moved.

[Kocal]

Hi, how did you installed UX Map Leaflet? Did you install UX Map aswell?

[Vastuney]

Hi, how did you installed UX Map Leaflet? Did you install UX Map aswell?

That's right, I installed both libraries - I'm struggling with this again. Either I don't know something, or the error comes from the first line in the map_controllers.js file

import AbstractMapController from '@symfony/ux-map/abstract-map-controller';

should be

import AbstractMapController from '@symfony/ux-map/abstract_map_controller';

Works for me.

[Kocal]

Ah, looks like you are not using Symfony AssetMapper/ImportMap but Webpack Encore?

The component is experimental, so we can break things without worries.

I think we will need to update the following lines to use @symfony/ux-map/abstract_map_controller:

• https://github.com/symfony/ux/blob/2.x/src/Map/assets/package.json#L12
• https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts#L1-L2
• https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Google/assets/src/map_controller.ts#L10-L11

[nfreader]

👍 from me on this. I'm also using Encore and running into the same issue. I tried editing the referenced files locally but didn't have any luck (I'm not a big JS type).

[principis]

Ah, looks like you are not using Symfony AssetMapper/ImportMap but Webpack Encore?

The component is experimental, so we can break things without worries.

I think we will need to update the following lines to use @symfony/ux-map/abstract_map_controller:

* https://github.com/symfony/ux/blob/2.x/src/Map/assets/package.json#L12

* https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts#L1-L2

* https://github.com/symfony/ux/blob/2.x/src/Map/src/Bridge/Google/assets/src/map_controller.ts#L10-L11

Still doesn't seem to work. The following does, but I'm not sure if it's compatible with AssetMapper:

import AbstractMapController from '@symfony/ux-map';

[smnandre]

I think we have a way to handle both WebpackEncore and AssetMapper syntax/descriptor :

ux/src/LiveComponent/assets/package.json

Lines 11 to 28 in 2a177d6

	"symfony": {
	"controllers": {
	"live": {
	"main": "dist/live_controller.js",
	"name": "live",
	"webpackMode": "eager",
	"fetch": "eager",
	"enabled": true,
	"autoimport": {
	"@symfony/ux-live-component/dist/live.min.css": true
	}
	}
	},
	"importmap": {
	"@hotwired/stimulus": "^3.0.0",
	"@symfony/ux-live-component": "path:%PACKAGE%/dist/live_controller.js"
	}
	},

[smnandre]

I believe this is how we allow import LiveComponent from "@symfony/ux-live-component"

The other way could be to inline the abstract class during compilation/bundling ?

see: https://symfony.com/bundles/ux-live-component/current/index.html#working-with-the-component-in-javascript

[rrenteria-dev]

I'm also facing this issue using symfony/ux-google-map and webpack encore.
Like @principis said, if i change the import statement from @symfony/ux-google-map/dist/map_controller.js

from

import AbstractMapController from '@symfony/ux-map/abstract-map-controller';

to

import AbstractMapController from '@symfony/ux-map';

it works

any suggestions?

thanks in advance

[Kocal]

I will take a look

[Kocal]

Good news coming soon 🤩

[Kocal]

PR opened #2199