[LiveComponent] Running npm install --force fails with "This is related to npm not being able to find a file."

[brabli]

When trying to install the latest version of UX Live Component I can successfully install the package with composer.
When I run npm install --force however the command fails with an error message that suggests it can't find a file (see image).

My package.json points at a file in my vendor folder:

"@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",

...and upon inspection the directory in question it appears to look fine, containing it's own package.json alongside a dist and styles directory.

I have attatched the npm log file in case it's useful at all.

2024-03-01T13_00_54_787Z-debug-0.log

[pcmmf]

Just to confirm I have the same issue. It occurred after a composer update to the v2.16.0 versions of the bundles.

[smnandre]

Could it be related to this dependency ?

"dependencies": {
        "idiomorph": "https://github.com/bigskysoftware/idiomorph.git"
 },

[pcmmf]

Yes, removing that from vendor/symfony/ux-live-component/assets/package.json did allow npm to run, but anything that used the live components obviously wouldn't work properly.

[smnandre]

If you try with this, does it work better ?

"dependencies": {
        "idiomorph": "github:bigskysoftware/idiomorph"
 },

[pcmmf]

It doesn't seem to help in my case. I patched the file manually, but still receive the following:

npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -2
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

With the line removed altogether, npm update works fine.

[smnandre]

Last attempt (but maybe the good one 🤞 )

"dependencies": {
        "idiomorph": "^0.3.0"
 },

[pcmmf]

With that change, npm update now works, but it seems the live components are not working. I have a form based live component which worked prior to this issue. Now, the page is POSTed - seemingly the JavaScript isn't intercepting the request. I get a console error of:

405.4e849f84.js:2 Error invoking action "submit->live#action" Error: No action name provided on element. Did you forget to add the "data-live-action-param" attribute?

Prior to 2.16, my component twig looked like this:

{{ form_start(form, {
        attr: {
            'novalidate': true,
            'data-action': 'live#action',
            'data-action-name': 'prevent|calculate',
        }
    }) }}

I tried changing this to:

{{ form_start(form, {
        attr: {
            'novalidate': true,
            'data-action': 'live#action',
            'data-live-action-param': 'prevent|calculate',
        }
    }) }}

This then gives the console error: app.728fce7b.js:1 Unknown modifier prevent in action "prevent|calculate". Available modifiers are: stop, self, debounce, files.

So, it seems the change to the dependencies you mentioned @smnandre works, but I potentially have some other tidying up to do to make it work with v2.16.

[smnandre]

Indeed you'll have a bit of work, but this should go well (i hope) : https://github.com/symfony/ux/blob/2.x/UPGRADE.md

[smnandre]

Thank you for testing this, i'll open a PR to fix the bug.

[pcmmf]

@smnandre No problem. The changes from the UPGRADE.md work fine too, thanks!