symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
851 stars 313 forks source link

[LiveComponent] Live controller isn't registered automatically by startStimulusApp #632

Closed sabat24 closed 1 year ago

sabat24 commented 1 year ago
  1. I created new App (SF 6.1) with symfony/webpack-encore-bundle:^1.14.
  2. I installed symfony/ux-live-component:^2.6 and ran yarn install
  3. I set up everything correctly: I enabled stimulus bridge in my webpack file, controllers.json was created, I imported bootstrap.js and so on.
  4. Everything worked fine (stimulus, custom lazy loaded controllers), live component rendered correctly with data-controller="live" attribute. However there were no ajax actions triggered by live#$render or live#$action.

My controllers.json file

{
    "controllers": {
        "@symfony/ux-live-component": {
            "typed": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "@symfony/ux-live-component/styles/live.css": true
                }
            }
        }
    },
    "entrypoints": []
}

I had to manually import '@symfony/ux-live-component in my bootstrap.js and then register it as a controller.

import { startStimulusApp } from '@symfony/stimulus-bridge';
import LiveController from '@symfony/ux-live-component'; // <- ADDED MANUALLY
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/
));

// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

app.register('live', LiveController); // <- ADDED MANUALLY

Then it started to work fine. I guess that it shouldn't behave like that, because that package should be registered by startStimulusApp.

Did I do something wrong? Why did I have to register that controller manually?

1ed commented 1 year ago

It seems good to me. Maybe something cache related? How did you run webpack? When you use watch is usually needs a restart to notice new packages.

Does your webpack.config.js contain:

   // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

You should try to remove the app.register('live', LiveController); and restart the watcher or rebuild the app.

sabat24 commented 1 year ago

Does your webpack.config.js contain:

Yes. It was turned on and it worked I guess, because I was able to correctly run assets/controllers/hello_controller.js

How did you run webpack?

The first few times I used the yarn build command (which creates a production build). Later I changed the command to yarn dev to create development build. I have never used a watcher.

I'll try to prepare a demo app and deploy it somewhere to confirm my settings.

weaverryan commented 1 year ago

Yea, everything looks good to me too. You literally showed all the code from your app that should be enough to get this working. Very strange.

sabat24 commented 1 year ago

@1ed @weaverryan I was able to reproduce the issue on my demo app.

  1. You can preview my files and clone the repository -> https://github.com/sabat24/symfony-ux-632 (I left some my js dependencies in package.json)
  2. You can view the example on my website

https://live-demo.sabat24.pl/live - simple live component with page liveProp and updatePage liveAction. It's a basic bootstrap file without any modifications. After clicking a text, live action should be triggered and page should change from 1 to 2. I tested on FF - nothing happened.

To prove that Stimulus workscorrectly you can test it on https://live-demo.sabat24.pl/hello

https://live-demo.sabat24.pl/live2 - same component but I created another entry point for webpack with my modifications (import and registration of live_controller manually). This version works fine.

1ed commented 1 year ago

@sabat24 please run yarn upgrade or just yarn add @symfony/stimulus-bridge@^3.2.0, because you are using an old version, which doesn't contain https://github.com/symfony/stimulus-bridge/pull/70. But I don't know how you got that, because when I create a new project I get 3.2.1?

sabat24 commented 1 year ago

Thanks for that information. This actually solved my problem.

I added stimulus-bridge to my repository on April. The demo repository wasn't created from the scratch. I included my original .lock files to get same dependencies versions in both repositories.